Как лучше подключать стили и скрипты?

Question

[warcevil]

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

Answer 1

[Andrey Perov]

Используйте сборщики webpack, gulp и настраиваете под себя их, скину вам простенький пример gulpfile.js можете переделать под свой вариант

'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 и тд)
index.html
+ ---- fonts (просто переносятся в папку dist)
+ ---- svg (просто переносятся в папку dist)

Comments

[warcevil]

Спасибо за примерчик, зачитаешься ) А сборщиков сразу несколько использовать?

[Andrey Perov]

для верстки если мало js я использую gulp, где что то по серьезнее, то можно и заюзать webpack вместе с ним)

[warcevil]

я что то не понял, как у вас во первых css сжимается и где вообще все хранится? Напишите пожалуйста про вашу структуру

[warcevil]

Пока кстати https://habrahabr.ru/post/250569/ это изучаю.. Вроде толково все сделано

[Andrey Perov]

Я подредактировал в ответе примерно так, но вы всегда можете настроить под себя

[Andrey Perov]

это простейший пример просто

[warcevil]

то есть у вас для каждой страницы сайты один css так? И еще интересно как bower подключить к вашему проекту

[Andrey Perov]

в данный момент один, но вы можете переписать под себя по другому(как он будет собирать в папку dist), просто сядьте и попробуйте поковырять)

[warcevil]

да вот и ковыряю.. только не знаю какую структуру лучше сделать! С одной стороны хорошо чтобы 1 файл подключался, но интересно как быть в больших проектах, где 1 css несколько мегов весит к примеру )

[Andrey Perov]

если у вас не большой проект то можно и не париться с этим, а так копайте в сторону gulp webpack, например на wepback можно настроить так, что подружается стили и скрипты только используемого компонента