GulpfileクリティカルCSSソリューション

Question

GulpとSASSを使用してローカルで開発しており、動的サイト（CMS駆動型）のCSSをコンパイルしています。グローバルとクリティカルパスのCSSをコンパイルするソリューションを構成しようとしています。これまでの最良のアイデアは、私のメインのscssファイルをサイトテンプレート固有のファイル（例えばtemplateA.scss、templateB.scssなど）に分割することです。次に、サイトに引き込まれた個別のCSSをテンプレート。

私の質問は、これを容易にするためにgulpfile.jsを最適に設定する方法です。私は「テンプレートA」（実際にはサイトのホームページ）用にタスクを設定しています。私はクリティカルなCSSを利用する4-5の追加テンプレートを持っており、これらを追加するにはどのように最善の方法をフィードバックするのが大好きです。

ここホームページ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()); 
}); 

そして、あなたは2つのSCSSファイルで取引を見ることができるようにSASSタスク、 - 「グローバルCSS」の1および他の 'のは、ホーム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

あなたの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