gulpプラグインのgulp-less,gulp-sassおよびgulp-sourcemaps

gulp-less、gulp-sass、gulp-sourcemapsの概要:
gulp-lessプラグインはlessファイルをcssファイルにコンパイルするために使用されます.
gulp-sassプラグインはsassファイルをcssファイルにコンパイルするために使用されます.
gulp-sourcemapsプラグインはsourcemapファイルを生成するために使用されます.lessまたはsassファイルに様々な導入関係がある場合、コンパイル後に対応するlessまたはsassファイルを見つけるのは容易ではないため、sourcemapファイルを生成し、修正を容易にする必要があります.
一、gulp-less、gulp-sassとgulp-sourcemapsプラグインの使用
1、「gulp-less,gulp-sass,gulp-sourcemaps」プラグインコマンドをインストールする(端末がプロジェクトルートディレクトリに入って実行する)
            npm install --save-dev  gulp-load-plugins gulp-less gulp-sass gulp-sourcemaps
2、プロジェクトルートディレクトリの下に「gulp-lessとgulp-sass」プラグインタスクの構成に必要なsrcディレクトリとソースファイルを提供する(ソースファイルはsrcディレクトリの下に置く)
            mkdir src
3、gulpfile.jsファイルでの構成では「gulp-less,gulp-sass,gulp-sourcemaps」を使用します.

     ：
//     gulp-less   gulp-sourcemaps   
var gulp = require('gulp'),    
      plugins = require('gulp-load-plugins')();    //     
      
gulp.task('less', function () {                              //     "less"   
    return gulp.src('src/less/*.less')                     //      src/less       less   
        .pipe(plugins.sourcemaps.init())               //      gulp-sourcemaps    
        .pipe(plugins.less())                                   //    less   ，   less   
        .pipe(plugins.sourcemaps.write())             //    sourcemap   
        .pipe(gulp.dest('dist/less'));                       //         
});


    ：
//     gulp-sass   gulp-sourcemaps   
var gulp = require('gulp'),    
      plugins = require('gulp-load-plugins')();    //     
      
gulp.task('sass', function () {                             //     "sass"   
    return gulp.src('src/sass/*.scss')                   //      src/sass       scss   
        .pipe(plugins.sourcemaps.init())               //     gulp-sourcemaps       
        .pipe(plugins.sass())                                  //    sass   ，   sass   
        .pipe(plugins.sourcemaps.write())            //    sourcemap   
        .pipe(gulp.dest('dist/sass'));                      //         
});

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

});

4、最後に端末で「gulp」コマンドを実行する
PS:エラーメッセージがなければ、証明に問題はありません.プロジェクトルートディレクトリの下で、「dist/{less/sass}」ディレクトリとターゲットファイルを生成するかどうかを確認します.未完待续..
転載先:https://blog.51cto.com/luochen2015/1958290