Gulp学習ノート(一)

GlupはNode.jsベースのJavascriptライブラリであり、ワークフローを強化できる自動構築ツールであり、簡単なタスクを簡単に、複雑なタスクを管理することができます.gulp開発コミュニティは急速に成長しており、毎日新しいプラグインが誕生し、メインステーションにアクセスして完全なプラグインリストを表示しています.
はじめに
1.インストール

$ npm install --global gulp

2.プロジェクトルートディレクトリの下にgulpfile.jsを作成します.

var gulp = require('gulp');

gulp.task('compress', function(){
    // compress  
});

gulp.task('default', function(){
    //        
})；

3.運転

//      
$ gulp                      

//  compress  
$ gulp compress     

APIの説明

gulp.src(globs[, options])

指定したルール(globs:StringまたはArray)に一致するファイルのオプションパラメータを返します.

optons: {
    buffer: true,    //     (`file.contentes`)   ，   true；  false，  stream    
    read: true,      //   false，    `file.conetnts` null
    base: ''          //      
}

次に、options.baseの役割を具体例で示します.

  //     asset/script/component/hello.js，      `base`    `asset/script/`
  gulp.src('asset/script/**/*.js')    
        .pipe(minify())
        .pipe(gulp.dest('build'));    //    ：build/component/hello.js

  
  gulp.src('asset/script/**/*.js', {base: 'asset'})  
        .pipe(minify())
        .pipe(gulp.dest('build'));    //    ：build/script/component/hello.js

gulp.dest(path[, options])

ファイルをターゲットパスに書き込みます.フォルダが存在しない場合は、自動的に作成されます.オプションのパラメータ:

options: {
    cwd: process.cwd(),     //    ，       
    mode: 0777                 //    
}

gulp.task(name [, deps], fn)

タスクを定義します.nameはタスク名であり、スペースは使用できません.deps:現在のタスクが実行される前に完了するタスクのリスト.fn:タスクが実行するアクション.

gulp.watch(glob [, options], tasks) or gulp.watch(glob [, options, cb])

ファイルを監視し、ファイルが変更されたときに何かをすることができます.送信変更のたびにchangeイベントが送信されます.使用方法:

ファイル変更後に1つ以上のタスクを実行する

var watcher = gulp.watch('asset/script/**/*.js', ['jslint', 'reload']);
watcher.on('change', function(event){
       console.log(`File ${event.path} was ${event.type}, running tasks....`);
});

2.ファイル変更後にcallbackを実行する

gulp.watch('asset/script/**/*.js', function(event){
    console.log(`File ${event.path} was ${event.type}, running tasks....`);
});