フロントエンド構築ツールGulp入門ガイド(第2編)

前回はnode環境とgulpツールをインストールし、gulp構築ツールの使用を簡単に紹介しました.この記事ではgulpタスクの使用方法について重点的に紹介します.
文書ディレクトリ

はLass、Autoprefixおよび縮小

をコンパイルする

第2ステップ:gulp

をインストールする

第3歩:プロジェクトを新規作成しgulp環境依存

を確立する

第4歩:gulpfileを新規に構成する.jsファイル、gulp

を実行
Lassのコンパイル、Autoprefixおよび縮小
node環境がインストールに成功したかどうかを確認し、コマンドを実行します.

node -v	//  node   

npm -v	//  npm   

以上の2つのコマンドは、node環境のインストールに成功したことを示すバージョン情報を出力できます.
ステップ2:gulpのインストール
gulpをグローバルにインストールし、次のコマンドを実行します.

npm install --global gulp	//    gulp  

gulp -v	//  gulp      

ステップ3:プロジェクトを新規作成しgulp環境依存性を確立する
次のコマンドを実行します.

mkdir testapp && cd mkdir testapp //testapp       

npm init //    ，        sudo  ，           

npm install --save-dev gulp	//     gulp  

npm install gulp-less gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev //  gulp    

-save-devを使用してpackageを更新します.jsonファイル、devDependenciesの値は、プロジェクトがgulpに依存していることを示します.
よく使われるgulpプラグインは、Lass(gulp-lass)Autoprefixer(gulp-autoprefixer)縮小化(minify)CSS(gulp-minify-css)JSHint(gulp-jshint)接合(gulp-concat)醜化(Uglify)(gulp-uglify)ピクチャ圧縮(gulp-imagemin)インスタントリビルド(LiveReload)(gulp-livereload)クリーンアップファイル(gulp-clean)ピクチャを早く取り、変更された画像のみが圧縮(gulp-cache)更新通知(gulp-notify)されます.
ステップ4:gulpfileを新規に構成する.jsファイル、gulpを実行
プロジェクトのルートディレクトリにgulpfileを新規作成します.jsファイル、ファイルコードは以下の通りです.

//    gulp
var gulp = require('gulp'); 

//     
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

//     
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//   less
gulp.task('less', function() {
    gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

//   ，    
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('lib.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

//     
gulp.task('build_dev', function(){
    gulp.run('lint', 'less', 'scripts');

    //       
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'less', 'scripts');
    });
});

次にgulpを実行し、コマンドを実行します.

gulp build_dev

参考リンクはgulp公式サイトです.http://gulpjs.comgulpプラグインアドレス:http://gulpjs.com/pluginsgulp公式API:https://github.com/gulpjs/gulp/blob/master/docs/API.mdgulp中国語API:http://www.ydcss.com/archives/424