What is the best way to include styles and scripts?

Question

css

Подскажите как правильно и лучше будет подключить стили и скрипты? И что делать в том случае, если на отдельной странице используется слишком много уникальных стилей? Сейчас парюсь со сборщиком фронтенда, выбрал галп.. И возникло много вопросов ) И на сколько будет правильно если на все сайте будет подключаться все скрипты и ссс =) Думаю не очень правильно это будет, тогда как решить лучше эту проблему?

Answer 1

Use the webpack, gulp builders and customize them for yourself, I'll give you a simple gulpfile.js example, you can remake it for your own version

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var jade = require('gulp-jade');
var concat = require('gulp-concat');
var extender = require('gulp-html-extend');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');

var pub = './dist/';
var src = './src/';

gulp.task('js', function () {
    gulp.src(src + 'js/**/*.*')
        .pipe(gulp.dest(pub + 'js/'))
        .pipe(browserSync.stream());
});

gulp.task('sass', function () {
    gulp.src(src + 'sass/index.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 3 versions'],
            cascade: false
        }))
        .pipe(concat('app.css'))
        .pipe(gulp.dest(pub + 'css'))
        .pipe(browserSync.stream());
});

gulp.task('directory', function () {
    gulp.src(src + 'fonts/**/*.*')
        .pipe(gulp.dest(pub + 'fonts/'));
    gulp.src(src + 'svg/**/*.*')
        .pipe(gulp.dest(pub + 'svg/'));
});

// gulp.task('jade', function () {
//     return gulp.src(src + 'templates/jade/*.jade')
//         .pipe(jade())
//         .pipe(gulp.dest(pub))
//         .pipe(browserSync.stream());
// });

gulp.task('extend', function () {
    gulp.src(src + 'templates/*.html')
        .pipe(extender({annotations:true,verbose:false})) // default options
        .pipe(gulp.dest(pub))

});

gulp.task('sync', function () {
    browserSync.init({
        server: {
            baseDir: pub
        },
        port: '3000',
        ghostMode: false,
        open: false,
        serveStatic: [src]
    });

    gulp.watch(
        [ '*.html' ],
        { cwd: pub },
        browserSync.reload
    );
});

gulp.task('watchers', function() {
    gulp.watch(src + 'sass/**/*.scss', ['sass']);
    gulp.watch(src + 'templates/**/*.html', ['extend']);
    gulp.watch(src + 'js/**/*.*', ['js']);
});

gulp.task(
    'default',
    [
        'watchers',
        'sass',
        'directory',
        'extend',
        'js',
        'sync'
    ]
);

+ --------- dist
/fonts
/svg
app.css
index.html
+ --------- src
+ ---- sass
+ ---- templates
+ ----- --- partials (layout.html header.html footer.html etc)
index.html
+ ---- fonts (simply moved to dist folder)
+ ---- svg (simply moved to dist folder)