Gulpfile.js - gulp.watchの.min.css、.css、および.css.mapファイルを取得する方法

Question

私はこれについて多くの研究を行ってきましたが、Drupalサイトでは、私はzurb foundationテーマを持っていて、とても満足しています。私が抱えている唯一の問題は、scssコンポーネントをカスタマイズするときです。私はそれをコンパイルするためにgulpを使用しており、それはCSSファイルを再作成しています。しかし、私はまた私にmin.cssファイルとcss.mapファイルを与えたいと思っていますが、私はそれを理解しているようには見えません。私はgulpfile.jsで多くの異なる繰り返しを試みましたが、ここに私の最新です。

これはcssファイルのみを生成します。

var sassFiles = './themes/zurb_foundation/scss/**/*.scss', 
    cssDest = './themes/zurb_foundation/css'; 

    gulp.task('styles', function(){ 
    gulp.src(sassFiles) 
    .pipe(sourcemaps.init()) 
    .pipe(autoprefixer()) 
    .pipe(gulp.dest(cssDest)) 
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 
    .pipe(gulp.dest(cssDest))  
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) 
    .pipe(rename({ extname: 'min.css' })) 
    .pipe(sourcemaps.write('./themes/zurb_foundation/css')) 
    .pipe(gulp.dest(cssDest)) 
}); 

    gulp.task('watch', function() { 
    livereload.listen(); 
    gulp.watch(sassFiles, ['styles']); 
}) 

私は最終的にそれが次のエラーを生成するために得ている：私はこの時点で推測

CssSyntaxError: /Users/USERNAME/Desktop/SITEFOLDER/ROOTDIR/themes/zurb_foundation/scss/foundation.scss:1:1: Unknown word 
You tried to parse SCSS with the standard CSS parser; try again with the 
postcss-scss parser> 1 | // Foundation by ZURB 

を、私の質問は、私がセットアップする方法を私のgulpfileをpostcss-SCSSに取り組むことであろう解析？

Answer 1

まず、必要なパッケージをconstと宣言します。これらの値は割り当てを変更しないでください。

const gulp = require('gulp'); 
const sass = require('gulp-sass'); 
const sourcemaps = require('gulp-sourcemaps'); 
const cssmin = require('gulp-cssmin'); 

その後、我々は我々が.scss形式でスタイルフォルダ内のすべてのファイルを検索するSASSと呼ばれるゴクゴクタスクを、書きます。

エラーをチェックしてログに記録するため、ブラウザでSASSによって生成されたCSSを元のソースファイルにマップするためのソースマップを作成します（.scss/.cssのように使用します）。

新しい.cssファイルをpublic/stylesフォルダに書き込みます。

gulp.task('sass', function() { 
    return gulp.src('./styles/*.scss') 
     .pipe(sourcemaps.init()) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(sourcemaps.write('./maps')) 
     .pipe(gulp.dest('./public/styles')); 
}); 

た後、我々はminify-cssと呼ばれる二ゴクゴクタスクを記述します。

.css形式のすべてのファイルをスタイルフォルダ内で検索します。

まず、すべてのCSSプロパティに自動的にプレフィックスを付けます。たとえば、あなたが設定したCSSクラスを持っている場合：

user-select: none; 

Autoprefixingが追加処理します：

-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 

た後、私たちは、連結縮小化し、その後main.min.cssとして私達の新しい縮小さcssファイルに名前を付け、 public/stylesフォルダに保存します。

gulp.task('minify-css', function(){ 
    gulp.src(['./styles/*.css']) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'] 
     })) 
     .pipe(cssmin()) 
     .pipe(concat('main.css')) 
     .pipe(rename("main.min.css")) 
     .pipe(gulp.dest('./public/styles')); 
}); 

私たちはそのように単純に端末内にgulp buildを実行することにより、時系列順に両方sassとminify-cssタスクを呼び出すために、buildと呼ばれるタスクを記述します。

gulp.task('build', [‘sass’, ‘minify-css’]);