フロントエンド自動化の神器Gulp

NodejsはJavascriptをサービスに持ってきただけでなく、フロントエンドに自動化の波が巻き起こり、フロントエンドの仕事の歴史的な変化を推進しました.今日は皆さんと一緒にフロントエンド自動化の神器Gulpを勉強します.
自動化といえば、Grauntはもちろん欠かせません.この先輩はコミュニティが完備していて、何千もの既製のプラグインを持っています.installは文書を参考にすれば配置できます.Gulpの出現、その精華を取ってGuntに取って代わることを望んで、最も流行っているJavascript構築のツールになって、Gulpはコードの配置の策略に優れることを採用して、簡単な事を引き続き簡単にならせて、複雑な事を管理することができます;
Grauntとの違い:
 

ストリーム:Gulpは、ストリームベースの構築システムであり、コードを使用して構成より優れた戦略である.

プラグイン:Gulpのプラグインはより純粋で、単一の機能を持ち、一つのプラグインは一つのことしかしないと主張しています.

コードは構成より優れています.Glpを維持することはコードを書くようになり、GulpはCommon JS規格に準拠していますので、Nodeプログラムを書くことと変わりはありません.

中間ファイルが生成されていません.

 
Gulpを使う利点は、ストリームを利用してファイルの処理を行い、パイプを通して複数のタスクと操作を接続するため、I/Oのプロセスは一回だけで、プロセスがより明確で、より純粋です.Gulpは中間ファイルを削除し、最後の出力だけをディスクに書き込むので、プロセス全体が速くなります.
次のルートディレクトリの下にGulpfile.jsを新たに作成します.次のタスクを完了します.
 

ピクチャの可逆圧縮

Sassファイルのコンパイル圧縮

JSファイルの圧縮結合

以上のタスクのリアルタイム傍受

 
cmdはプロジェクトのルートディレクトリに入り、必要なGulpとプラグインをインストールします.

1 npm install gulp gulp-imagemin gulp-ruby-sass gulp-uglify gulp-cache gulp-watch --save-dev

GulpはCommunjsの規定に従いますので、Nodejsのプログラムを書くようにプラグイン達requireを中に入れることができます.

1 var gulp=require('gulp'); 
2 var imagemin=require('gulp-imagemin');
3 var cache=require('gulp-cache'); 
4 var uglify=require('gulp-uglify'); 
5 var sass=require('gulp-ruby-sass'); 
6 var watch=require('gulp-watch');

次に私達が達成するべき任務を完成します.

 1 //       
 2 gulp.task('imagemin',function() {
 3     return gulp.src('./dist/images/**.*')
 4             .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
 5             .pipe(gulp.dest('./dist/images'));
 6 });
 7 
 8 //js     
 9 gulp.task('uglify', function() {
10     gulp.src('./js/*.js')
11         .pipe(concat('all.js'))
12         .pipe(gulp.dest('./dist'))
13         .pipe(rename('all.min.js'))
14         .pipe(uglify())
15         .pipe(gulp.dest('./dist'));
16 });
17 
18 //sass     
19 gulp.task('sass',function() {
20     return sass('./dist/css/*.scss',{
21                 style:'compressed',
22                 loadPath:[
23                     'common/vars',
24                     'mixins/mixin',
25                     'mixins/css3',
26                     'common/reset',
27                     'common/com-class',
28                     'placeholders/placeholder'
29                 ]
30             })
31             .pipe(gulp.dest('./dist/min'));
32 });
33 
34 //      
35 gulp.task('watch',function() {
36     gulp.watch('./dist/css/*.scss',['sass']);
37     gulp.watch('./dist/react/main4.js',['uglify']);
38 })

かっこいいですか各プラグインの詳細な配置は、自分でgithubしてください.