gulp setup
2.0.4
このプロジェクトは、モジュラーで構成可能なGulpセットアップを作成することを目的としています。プロジェクトオートメーションを最小限に抑えて稼働させます。 Gulp-Setupは@Alexgrozavによって書かれ、維持されています。
npm install gulp-cli -g
npm install gulp gulp-load-plugins gulp-setup --save-dev
gulpfile.jsGulpSetupを使用してGulpのセットアップは、これまで以上に簡単です。
const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp ) ; デフォルトでは、Gulp-Setupには、さまざまな既製のタスクがバンドルされています。
gulp
gulp build
gulp clean
gulp watch
gulp lint
gulp html
gulp html-lint
gulp css
gulp css-lint
gulp sass
gulp sass-lint
gulp stylus
gulp stylus-lint
gulp javascript
gulp javascript-lint
gulp coffeescript
gulp coffeescript-lint
gulp typescript
gulp typescript-lint
gulp fonts
gulp images
gulp browser-sync
ガルプ
defaultタスクは、通常、Gulpで行うように、 build 、 browser-sync 、およびwatchのシーケンスを実行します。
Gulp Build
デフォルトでは、ビルドタスクはcleanタスクを実行し、その後、 patternパラメーターを提供する他のすべてのタスクを実行します。
ガープクリーン
このタスクは、既存のビルドフォルダーとDISTフォルダーを削除します。
ガルプウォッチ
watchタスクは変更を監視し、 patternパラメーターを提供するタスクを再構築します。これに加えて、 gulp-setup partials graphを作成します。これにより、変更されたファイルに依存するファイルが再構築されます。
ガルプリント
このタスクは、 -lintで終了するタスクを実行します。
Gulp HTML
.htmlファイルをビルドフォルダーにコピーしてから、それらを模倣してDistに出力します。
ガルプCSS
AutoPrefixes .cssファイルをビルドフォルダーに出力し、それらを模倣してDISTに出力します。
ガルプサス
.sassと.scssファイルと.scssをコンパイルしてビルドフォルダーに出力し、それらを模倣してdistに出力します。
このタスクは、 partials graphを使用します。つまり、部分的な変更がすべて親ファイルの再構築をトリガーすることを意味します。
ガルプスタイラス
.stylファイルをコンパイルおよびオートフィックスし、それらをビルドフォルダーに出力し、それらを模倣してdistに出力します。 Stylusインスタンスはrucksack-css機能も提供しています。
このタスクは、 partials graphを使用します。つまり、部分的な変更がすべて親ファイルの再構築をトリガーすることを意味します。
Gulp JavaScript
ES6 .jsファイルをコンパイルしてビルドフォルダーに出力し、それらを模倣してDistに出力します。 javascriptタスクは、 webpackまたはbrowserifyを使用してファイルを処理およびバンドルすることができます。これは、 options.bundlerパラメーターを使用して指定されています（以下の構成例に示すように）。
このタスクは、 partials graphを使用します。つまり、部分的な変更がすべて親ファイルの再構築をトリガーすることを意味します。
Gulp Coffeescript
.coffeeファイルをコンパイルしてビルドフォルダーに出力し、それらを模倣してdistに出力します。 javascriptタスクと同様に、ファイルをバンドルするためにwebpackまたはbrowserifyいずれかを使用できます。
このタスクは、 partials graphを使用します。つまり、部分的な変更がすべて親ファイルの再構築をトリガーすることを意味します。
Gulp TypeScript
.tsファイルをコンパイルしてビルドフォルダーに出力し、それらを模倣してdistに出力します。 javascriptタスクと同様に、ファイルをバンドルするためにwebpackまたはbrowserifyいずれかを使用できます。
このタスクは、 partials graphを使用します。つまり、部分的な変更がすべて親ファイルの再構築をトリガーすることを意味します。
ガルプ画像
.svg 、 .jpg 、 .png 、および.gifファイルを最適化し、それらをビルドおよびdistフォルダーに出力します。
ガルプフォント
copies .eot 、 .svg 、 .ttf 、 .woff 、および.woff2ファイルをビルドおよびdistフォルダーにファイルします。
既存のデフォルトjavascriptタスクのオプションを設定し、ベースjavascript Oneを拡張することによりjavascript-extと呼ばれる新しいGulpタスクを作成するGulp-Setupのサンプル構成を次に示します。タスクを拡張するときに、デフォルトのタスクパラメーターをオーバーライドできます。
tasksオブジェクトキーは、GULPタスクの名前を定義します。
const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp , {
paths : {
src : 'path/to/src' ,
build : 'path/to/build' ,
dist : 'path/to/dist'
} ,
cache : true ,
debug : true ,
tasks : {
'javascript' : {
options : {
bundler : 'webpack'
}
} ,
'javascript-ext' : {
extends : 'javascript' ,
paths : {
src : 'path/to/custom-src'
}
}
}
} ) ; Gulp Setupに存在するタスクは、 processとbase 2つのコンポーネントで作成されています。 patternなどの他のすべてのパラメーターは、これらのコンポーネントで利用可能になります。
const setup = require ( 'gulp-setup' ) ( $ , gulp , {
tasks : {
'mytask' : {
base : './bases/base' ,
process : './tasks/mytask' ,
pattern : '**/*.css' ,
paths : {
src : 'path/to/custom-src' ,
build : 'path/to/custom-build' ,
dist : 'path/to/custom-dist'
}
}
}
} ) ;baseタスクは、他のタスクのテンプレートとして機能します。プロセスを統合するために、 init 、 build 、DIST、およびend 4つのパイプラインフックを利用可能にします。 baseタスクが欠落している場合、 processスタンドアロンタスクと見なされ、テンプレートを使用しません。
// bases/base.js
module . exports = ( $ , gulp , config , task ) => ( ) =>
gulp . src ( $ . path . join ( config . task . src || config . paths . src , task . pattern ) )
. pipe ( task . process . init ( ) ) // Initialization hook
. pipe ( $ . debug ( ) )
. pipe ( task . process . build ( ) ) // Building hook
. pipe ( gulp . dest ( config . task . build || config . paths . build ) )
. pipe ( task . process . dist ( ) ) // Distribution hook
. pipe ( gulp . dest ( config . task . dist || config . paths . dist ) )
. pipe ( task . process . end ( ) ) ; // Ending hook Gulp-Setupパッケージは、次の既製のベースを提供します： gulp-setup/bases/base 、 gulp-setup/bases/compile 、 gulp-setup/bases/lint 。これらのベースをカスタムプロセスタスクに使用できます。
プロセスタスクは、タスクが関係する主な処理です。プロセスタスクは通常、テンプレートを使用します。テンプレートは、 init 、 build 、 dist 、またはendフックを提供することで統合するbaseタスクです。または、このプロセスをスタンドアロンのガルプタスクとして記述することもできます。
テンプレート
// tasks/mytask.js
module . exports = ( $ , gulp , config , task ) => ( {
build : $ . lazypipe ( )
. pipe ( $ . autoprefixer ) ,
dist : $ . lazypipe ( )
. pipe ( $ . cssmin )
} ) ;スタンドアロン
// tasks/myclean.js
module . exports = ( $ , gulp , config , task ) => {
return ( ) => gulp . src ( [ config . paths . build , config . paths . dist ] )
. pipe ( $ . clean ( ) ) ;
} バグまたは機能リクエストがありますか？まず問題のガイドラインを読んで、既存の問題と閉じた問題を検索してください。あなたの問題やアイデアがまだ対処されていない場合は、新しい問題を開いてください。
