3.LESSの自動コンパイル

Webパッケージをもう一度表示

対応するgulpプラグインのインストール

npm install gulp-less  //         less …

npm install gulp-concat  //        less     css     css  …

npm install gulp-plumber  //                …

npm install gulp-notify  //         ，         ，           gulp  …

gulpfileを修正する.jsファイル

//          ，     ，         ，         css  （less  ）
var less = require('gulp-less');  //less  
var concat = require('gulp-concat');  //    
var plumber = require('gulp-plumber');  //        
var notify = require('gulp-notify');  //          

//less  
gulp.task('less',function(cb){
    return gulp.src('less/common.less')  //       less  ，  less     less/*.less，
        .pipe(plumber({errorHandler: notify.onError('Error:;')}))  //  less        ， notify    ， plumber        
        .pipe(less())  //     ，   less
        .pipe(concat('happyasyou.css'))  //     css     ，        ，      ，      
        .pipe(gulp.dest('css/'));  // css    css    
});

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

//     ：       'woyaofuwuqi'   
//   
gulp.task('woyaofuwuqi', function () {
    //         
    connect.server({
        liverload: true,port:9000 //   
    });
    gulp.watch(['*/*.html'],['qinghuancun']);
    gulp.watch(['*/*.less'],['less']);
});
/***********************************************************/
//     ：        ，                 
//  
gulp.task('taskList', ['woyaofuwuqi','watchHtml','watchLess']);
//      ，        ，         。
gulp.task('default', function() {
    //     
    console.log('this is a new test page.');
    //gulp.start('woyaofuwuqi');
    gulp.start('taskList');  //      
});

body{
    color:#f0f;//   
    background-color:#abc000; //   
    /*         ！*/
}