Clever Geek Handbook

10行のgulpfile？ 簡単！ -典型的なタスクの作成を簡素化

最近、ほとんどすべてのプロジェクトで、少ない/ sass / css / js / htmlなどを構築する必要があります。 ファイル。 Gulpはこれらのタスクに対する優れたソリューションであり、grunt'a後の息を吐きますが、理想的でもありません。











たとえば、browserifyを使用して一般的なjsを構築する必要がある場合、12個の依存関係を使用して接続し、約50行のコードを記述する必要があります。 一例を示します。



gulpfile.jsを簡素化する必要がある



問題



新しいプロジェクトを作成するときは、毎回数十個のnpmモジュールをインストールし、50行以上のコードをプロジェクトからプロジェクトにドラッグする必要があります。これは非常に不便であり、偶然です。 。



解決策



その結果、npm module gulp-easyという形式のソリューションが実現しました。 モジュールには、各プロジェクトで見つかった「ケース」が蓄積されています。



  1. 各gulpファイルの出力には2つのタスクがあります。開発者向けのデフォルトと、 本番リリース用の本番です。
  2. 本番モードでは圧縮がオンになり、開発者モードでは変更の「監視」がオンになり、ソースマップが追加されます
  3. 最も人気のあるコンパイルは、一般的なjs-> bundleおよびless-> cssです
  4. コンパイル中（監視モード）に発生するエラーは、プロセスが気付かれずに死なないように抑制する必要があります。
  5. cssおよびjsファイルの場合は、常にgzipを作成するとよいでしょう
  6. 通常、ベースソースディレクトリと公開用のディレクトリは構成に配置されます。


その結果、典型的なタスクをこのタイプに減らすことができます。 



require('gulp-easy')(require('gulp')) .config({ dest: 'app/public' }) .less(['less/header.less', 'less/main.less'], 'style.css') .js('js/index.js', 'app/public/lib/main.js')


このコードは、gulpに対して次のタスクを作成します。

  • CSSファイルapp / public / style.css内の less / header.less 、 less / header.lessのファイルを結合およびコンパイルします。 ベースディレクトリは設定で指定されます。
  • 一般的なjsコードをjs / index.jsからapp / public / lib / main.jsにコンパイルします。
  • ソースを変更するためにサブスクライブし、変更時に適切なタスクを実行します。


タスクがjsおよびcssコードのコンパイルを超える場合は、独自のタスクを追加できます。 



 require('gulp-easy')(require('gulp')) // ... .task(function(gulp, taskName, isCompress, isWatch) { gulp.src(['images/*']).pipe(gulp.dest('public/images2/')); }, function(gulp, taskName, isCompress) { gulp.watch(['images/*'], [taskName]); })


これは、すべてのファイルをimagesディレクトリからpublic / images2ディレクトリにコピーし、ソースのファイルを変更するためにサブスクライブします。



利用可能なすべてのメソッドの詳細な説明は、 githubのドキュメントで見ることができます。



Che for ...（そして誰がそれを必要としますか？）











実際、 gulp-easyモジュールはそのニーズに合わせて作成されました。 ただし、同様の典型的なタスクを持っているか、タスクを分岐して同様のスタイルで実装する可能性があります。 したがって、このソリューションは誰かに役立つはずです。



ボーナス



実験および私自身の開発として、クラス、継承、インポート/エクスポートを使用して、このモジュールをes6スタイルで作成しました。 node.jsでは、これはbabelを使用して起動されます（はい、Node.js 4.0.0はes6の一部をサポートしますが、すべてではありません-たとえば、インポート/エクスポート構造はありません）-気にして、 ソースを参照してください。



希望があれば、PMでまたはメールで書くことができます-affka@affka.ru

楽しい時間をお過ごしください！


More articles:


All Articles