gulp自動コンパイルsass

1.mkdir project  
2.cd project
3.packageを新規作成します.jsonファイル、空のペアを書き込みます{}
3. sudo npm install gulp --save-dev
4.sudo npm install gul-sass --save-dev
5.新しいcss、scssディレクトリ
5.新しいgulpfile.js,gulpとgulp-sassを導入する.

var gulp = require('gulp'),
    sass = require('gulp-sass');

　　
sassというtaskタスクの作成

gulp.task('sass', function(){
　　return gulp.src('./scss/**/*.scss') //            
　　　　　　.pipe(sass({outputStyle: 'compact'}).on('error', sass.logError)) //        sass()      ，        
　　　　　　.pipe(gulp.dest('./css')); //       ,     scss      css  ，    ，       

})

gulp sassを入力するとコンパイルが実行されます
このような簡単なgulpコンパイルsass構成は完了したが、scssファイルの内容を変更するとgulpが自動的に傍受してコンパイルする傍受(watch)を実現することはできない.
watch機能を実現するには、taskを新規作成する必要があります.

gulp.task('watch', function() {
    gulp.watch('./scss/**/*.scss', ['sass']); //                ，                   ，       sass task  
});　　

入力gulp watch
これでgulpの自動リスニングコンパイルsass機能構成がほぼ完了し、
しかし、私たちが作成したsassファイルに構文エラーが発生すると、gulpリスニングはエラーを報告し、自動的にリスニングして再コンパイルする機能は失効します.
最終的にgulpの入力を実現するためには、自動的に傍受することができ、いくつかの操作が必要です.
1. sudo npm install gulp-notify --save-dev
2.プロジェクトにhandleErrorsを新規作成します.jsファイル

var notify = require('gulp-notify');
module.exports = function(){

    var args = Array.prototype.slice.call(arguments);

    notify.onError({
        title: 'compile error',
        message: ''
    }).apply(this, args);//       

    this.emit();//  
}

　　
作成するjsの目的はgulp-sassが持参したエラー処理方法を置き換えることである.
gulpfileに戻ります.jsファイル、handleErrorsを導入します.js:

var handleErrors = require('./handleErrors.js');  //      ，handleErrors        ，        

　　
この行のコードを見つけます.

.pipe(sass({outputStyle: ''compact}).on('error', sass.logError)) //    sass.logError 
   
.pipe(sass({outputStyle: 'compact'}).on('error', handleErrors)) //        handleErrors      

3.defaultというtaskタスクを追加します.

gulp.task('default', ['sass', 'watch']); 

これにより、コマンドラインにgulpが入力され、gulpはデフォルトでdefaultというtaskタスクを探し、sass、watchタスクをついでに実行します.
大功を成し遂げる.
 
最後に注意しなければなりません.
 
一般scssディレクトリの下にmainがあります.scssファイルは、入口ファイルとして、mianを除く他のscssファイルを導入する.scssファイル、残りのscssファイルに下線を付ける_
例えば_variables.scssは、cssディレクトリの下で最終的に1つのmianしか生成する.cssファイル.
転載先:https://www.cnblogs.com/hanweb/articles/6713618.html