Gulpfile Критическое решение для CSS

Question

Я разрабатываю локально с помощью Gulp и SASS для компиляции CSS для динамического сайта (т. Е. Управляемого CMS). Я пытаюсь настроить решение для компиляции глобального или критического пути CSS. Самая лучшая идея до сих пор заключается в том, чтобы разделить мой основной файл scss на файлы шаблонов сайтов (например, templateA.scss, templateB.scss и т. Д.). Затем я могу выводить и минимизировать дискретный CSS, который вытаскивается на сайт, шаблон по шаблону ,

Мой вопрос в том, как оптимально настроить gulpfile.js, чтобы облегчить это. У меня есть задача, настроенная для «шаблона А» (на самом деле это страница сайта). У меня есть 4-5 дополнительных шаблонов, которые будут использовать критический CSS, и будут любить отзывы о том, как их лучше добавить.

Вот вышеупомянутая задача, которая имеет дело с домашней страницы SCSS:

gulp.task('home', function() { 
return gulp.src([ 
    'scss/home.scss' 
    ]) 
    .pipe(sass({ 
     includePaths: [ 
      paths.bower + '/foundation-sites/scss' 
     ] 
    })) 
    .pipe(autoprefixer({ 
     browsers: ['last 2 versions', 'ie >=9'] 
    })) 
    .pipe(concat('home.css')) 
    .pipe(gulp.dest(paths.assets + '/styles/crpath-css')) 
    .pipe(cleanCSS({compatibility: 'ie8'})) 
    .pipe(gulp.dest('assets/styles/crpath-css')) 
    .pipe(sync.stream()); 
}); 

и задача Сасс, которая, как вы можете видеть сделки с двумя SCSS файлов - один для «глобальной CSS», а другой для " home css '.

gulp.task('sass', function() { 
return gulp.src('scss/app.scss') 
.pipe($.sass({ 
    includePaths: sassPaths, 
    outputStyle: 'expanded' 
}) 
    .on('error', $.sass.logError)) 
.pipe($.autoprefixer({ 
    browsers: ['last 2 versions', 'ie >= 9'] 
})) 
.pipe(concat('styles.dev.css')) 
.pipe(gulp.dest('assets/styles')); 

return gulp.src('scss/home.scss') 
.pipe($.sass({ 
    includePaths: sassPaths 
}) 
    .on('error', $.sass.logError)) 
.pipe($.autoprefixer({ 
    browsers: ['last 2 versions', 'ie >= 9'] 
})) 
.pipe(concat('home.css')) 
.pipe(gulp.dest('assets/styles/crpath-css')) 
.pipe(cleanCSS({compatibility: 'ie8'})) 
.pipe(gulp.dest('assets/styles/crpath-css')); 
}); 

Нужно ли создавать отдельную задачу для работы (и просмотра) каждого файла scss?

В случае необходимости, вот gulpfile во всей своей полноте:

var gulp = require('gulp'); 
var autoprefixer = require('gulp-autoprefixer'); 
var sass = require('gulp-sass'); 
var concat = require('gulp-concat'); 
var cleanCSS = require('gulp-clean-css'); 
var sync = require('browser-sync').create(); // create a browser sync instance. 

var paths = { 
    'bower': 'bower_components', 
    'assets': 'assets' 
}; 

var mypath = { 
    'mycss': 'css' 
}; 

gulp.task('styles', function() { 
    return gulp.src([ 
     'scss/app.scss' 
     ]) 
     .pipe(sass({ 
      includePaths: [ 
       paths.bower + '/foundation-sites/scss' 
      ] 
     })) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions', 'ie >=9'] 
     })) 
     .pipe(concat('styles.dev.css')) 
     .pipe(gulp.dest(paths.assets + '/styles')); 
}); 

gulp.task('home', function() { 
    return gulp.src([ 
     'scss/home.scss' 
     ]) 
     .pipe(sass({ 
      includePaths: [ 
       paths.bower + '/foundation-sites/scss' 
      ] 
     })) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions', 'ie >=9'] 
     })) 
     .pipe(concat('home.css')) 
     .pipe(gulp.dest(paths.assets + '/styles/crpath-css')) 
     .pipe(cleanCSS({compatibility: 'ie8'})) 
     .pipe(gulp.dest('assets/styles/crpath-css')) 
     .pipe(sync.stream()); 
}); 

gulp.task('sass', function() { 
    return gulp.src('scss/app.scss') 
    .pipe($.sass({ 
     includePaths: sassPaths, 
     outputStyle: 'expanded' 
    }) 
     .on('error', $.sass.logError)) 
    .pipe($.autoprefixer({ 
     browsers: ['last 2 versions', 'ie >= 9'] 
    })) 
    .pipe(concat('styles.dev.css')) 
    .pipe(gulp.dest('assets/styles')); 

    return gulp.src('scss/home.scss') 
    .pipe($.sass({ 
     includePaths: sassPaths 
    }) 
     .on('error', $.sass.logError)) 
    .pipe($.autoprefixer({ 
     browsers: ['last 2 versions', 'ie >= 9'] 
    })) 
    .pipe(concat('home.css')) 
    .pipe(gulp.dest('assets/styles/crpath-css')) 
    .pipe(cleanCSS({compatibility: 'ie8'})) 
    .pipe(gulp.dest('assets/styles/crpath-css')); 
    }); 

gulp.task('minify-css', function() { 
    return gulp.src('assets/styles/crpath-css/*.css') 
    .pipe(cleanCSS({compatibility: 'ie8'})) 
    .pipe(gulp.dest('assets/styles/crpath-css')); 
}); 

gulp.task('watch', function() { 

    sync.init({ 
    injectChanges: true, 
    proxy: 'localhost/wesleypicotte' 
    }); 

    gulp.watch('scss/**/*.scss', ['styles']); 
    gulp.watch('scss/**/*.scss', ['home']); 
    gulp.watch('scss/**/*.scss').on('change', sync.reload); 
}); 

gulp.task('default', ['styles', 'home', 'minify-css']); 

Answer 1

Вы можете использовать Globs в вашем Src декларации return gulp.src('./**/*.scss', '!**/_*.scss') и он должен захватить каждый файл, который не является не предваряемые _. т.е. home.scss и main.scss будут скомпилированы до home.css и main.css, но _buttons.scss будет выполняться только в том случае, если они включены в другой файл. Все файлы будут выводиться в один и тот же каталог, поэтому, если вы хотите, чтобы они оказались в другой структуре, вы можете посмотреть https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md