gulpプラグイン推奨、無敵で使いやすい


最近gulpの方面のものを振り回して、その中でとても使いやすいプラグインを発見して、今みんなに安利をあげます:
P.S.:これらのプラグインの具体的な使い方を確認する必要がある場合は、www.npmjsに入ることをお勧めします.comでは、プラグインを検索して使用を学習します.
あるいはあなたも私に連絡することができて、私はできるだけあなたの解答を手伝うことができます~
1、gulp-compass.
このプラグインはcompassを使用してsassファイルをコンパイルするのに役立ちます.もちろん、rubyをインストールしてsassとcompassの環境を構築することが前提です.
2、gulp-autoprefixer.
このプラグインは、いくつかのCSSプロパティに接頭辞を挿入するのに役立ち、非常に便利です.しかし、browsersという項目に注意してください.現在必要な互換性のあるブラウザ環境を構成する必要があります.
推奨browserプロパティは次のとおりです.
browsers: [
	'last 2 versions',
	'safari 5',
	'ie 8',
	'ie 9',
	'opera 12.1',
	'ios 6',
	'android 4'
]
以上は、比較的主流のブラウザと互換性があります.
3、gulp-data.
このプラグインはejsテンプレートを使っていたときに偶然見つけたものです.その時、gulpを通じて私のhtmlを創造するためにejsにデータを打ち込む方法に悩んでいました.それは絶対に利器です.
ただ、gulp-dataが作成したデータファイルをファイル名ごとに打ち込むように、ファイルのパスを手配する必要があります.
以下はejsのgulp構成についてですが、gulp-cachedも利用しています.
var gulp 	= require('gulp');
var config 	= require('../config.js');
var cache 	= require('gulp-cached');
var path 	= require('path');
var data 	= require('gulp-data');
var ejs 	= require('gulp-ejs');

gulp.task('ejs', function () {
	return gulp.src( config.ejs.src )
		.pipe( cache( 'ejs' ) )
		.pipe(data(function(file) {
	    	return require(path.join(path.dirname(file.path), 'ejs-data/', path.basename(file.path, '.ejs') + '.json'));
	    }))
		.pipe( ejs() )
		.pipe( gulp.dest(config.ejs.dest) );
})

4、gulp-cached.
このプラグインは主にキャッシュ形式で、変更されていないファイルをパイプに入れません.ファイルはパイプにないのでgulpの次の処理は行われません.これにより、多くの無駄なリソースを節約し、必要なファイルだけを処理することができます.
使い方はとても簡単ですから、npnjsに行くことをお勧めします.comでこのプラグインを検索し、対応する使い方を探します.
5、gulp-changed.
このプラグインは、主に変更されていないファイルをパイプデータストリームに入れないようにします.
どこで使えますか?最もよく使われるのは、png、jpgなどの圧縮画像です.私たちの作業ディレクトリには圧縮が必要な画像が大量に存在しますが、彼らはすでに圧縮されています.このとき、私たちはそれを使用することで、大きなリソース節約を達成することができます.
私のプロジェクトのように、pngピクチャを圧縮するたびに、10 s走ります.今gulp-changedを使って、私は33 msで走ることができます.昇進空間は極めて驚くべきものだ.
注意:このプラグインは、私の観察では、ファイル名を比較することで次の処理を行うはずです.pngなどのファイルは、入出力の2つのプロセスがファイル名に影響しないため、このプラグインを使用できます.ただし、sassなどのファイル名や接尾辞名を変更するファイルは、このプラグインは使用できません.
6、gulp-remember.
このプラグインはgulp-cachedと組み合わせて使用されます.ワークフローに参加するには、jsファイルごとにコメント情報を追加するなど、各ファイルを少し処理する必要があります.newerは、次のパイプラインに進まずに、このjsファイルを処理後にcachedに再配置することができます.
7、gulp-newer.
このプラグインは、現在のディレクトリの下にある新しいファイルのみをワークフローに挿入し、ファイルが出力ディレクトリに存在する場合はパイプには入りません.
注意:このプラグインは、私の観察では、ファイル名を比較することで次の処理を行うはずです.pngなどのファイルは、入出力の2つのプロセスがファイル名に影響しないため、このプラグインを使用できます.ただし、sassなどのファイル名や接尾辞名を変更するファイルは、このプラグインは使用できません.
8、gulp-sequence.
gulpを使うとrun()一連のタスクを実行する場合gulpのタスクは同時実行であるため,他のタスクが完了していない場合が多く,これが完了している.例えば、compassを使用してsassファイルをコンパイルする必要があります.同時に、雪碧図を生成し、png圧縮のタスクを実行します.この時、gulp-sequenceを使います.
gulp-sequenceとgulp-run-sequenceの使い方は大同小異で、実はgulp.run()は基本的に一致していますが、カッコでは、1つのパラメータがタスクのセットを表し、このタスクのセットが完了すると、次のタスクのセットが実行されます.同じグループのタスクでは、同時実行を許可できます.
次のような形をしています.
sequence('sass', ['png', 'ejs'])

つまり、私はまず「sass」タスクを実行し、それから「png」と「ejs」を同時に実行します.
————————————————————————————————————————————————
gulpの中の良いプラグインはとても多くて、私はまた続々と補充します!
何か良いお勧めやアドバイスがあれば、私に連絡したり、下にメッセージを残したりしてください.