gulp plate
1.0.0
Gulp ボイラープレートとビルド システム。
次のツール、タスク、ワークフローが含まれます。
<symbol>タグと<use>タグを含む SVG アイコン スプライトを生成します。SilverStripe バージョンをお探しですか?ここを見てください。
Gulp-plate は次のテクノロジーに依存しています。
[1] nvm (Node Version Manager) を介してノードをインストールすることをお勧めします。
始めるには:
$ git clone https://github.com/arillo/gulp-plate myProject
$ cd myProject
$ rm -r .git # Remove the link to the git repo
$ yarn # Install dependencies # Equivalent
$ yarn run buildデフォルトのタスクを実行し、 distフォルダーにサイトの開発バージョンを生成します。
# Equivalent
$ yarn start
$ yarn run watchデフォルトのタスクを 1 回実行し、サーバーを起動してファイルの変更を監視します。
# Equivalent
$ yarn run prod NODE_ENV='production'と設定し、js、css、html を圧縮してサイトの実稼働バージョンを生成します。これはサーバー上に配置されるフォルダーです。
他の gulp タスクを実行したい場合は、build /gulp コマンドにタスク名を追加するだけです。
# Equivalent
$ yarn run build sprite
$ yarn run b sprite
$ yarn run gulp sprite
$ yarn run g sprite重要：
distディレクトリは build / watch / prod を実行するたびに削除されます。 distディレクトリには変更を加えないでください。
myProject/
gulpfile.js/ # gulp tasks
src/
icons/ # SVG files to be included in he the sprite
images/ # other images
js/ # js code
sass/ # Sass code, SCSS and Sass indented syntax possible
html/ # html templates
data/ # data in json format
layouts/ # reusable layout templates
macros/ # Nunjucks macros
shared/ # reusable snippets すべてのパスとプラグイン設定は、一元化されたファイル./gulpfile.js/config.jsに抽象化されています。パスと設定をプロジェクトの構造とニーズに合わせて調整します。
スプライトはsprite.svgという名前の画像を./dist/images/に作成します。また、 _sprite.scssという名前の Sass ファイルが./src/sass/base/に作成されます。
生成された Sass ファイルには、各アイコンの寸法など、スプライト アイコンに関する有用な情報が含まれています。ファイルはアイコンが追加、削除、または変更されるたびに変更されるため、手動で編集しないでください。 ./gulpfile.js/tpl/_sprite.scssのテンプレートを変更することで、ファイルを変更できます。
フォント ファイルなどの静的アセットを変換せずにソース ディレクトリから移動する。 config.jsのstatic配列にsrcとdestパスを追加します。
テンプレートはNunjuckを使用します。使用方法の詳細については、ドキュメントを参照してください。
Sass のインデント構文がデフォルトで使用されます。メインの Sass ファイルには.sass拡張子が必要です。拡張子が付いていないとコンパイラが失敗します。パーシャルは.sassと.scssの両方にすることができます。
CSS にサードパーティのスタイルを含めるには、 main.sassファイルに含めるを使用します。
// main.sass
@import url( ' ../../node_modules/normalize.css/normalize.css ' ) ;postcss プラグインは、ソースマップを保存したファイルをインライン化します。 Sass コンパイル後。
Sass は@import url(...)ステートメントを生成された CSS ファイルの先頭に移動するため、これらのスタイルは含める場所に関係なく、常にファイルの先頭に組み込まれることに注意してください。
執筆時点では、 sass-lint空のセレクターに遭遇すると失敗します。これはバグです。空のセレクターの後にインデントされたコメント//追加することで回避できます。
.mySelector
//
.mySelector_child
text-align : center ./gulpfile.js/config.jsファイルには、完全な Webpack 構成が含まれています ( js変数を参照)。必要に応じて自由に変更してください。 eslintバベルローダーに依存するため、 babel-loaderが常に存在する必要があることに注意してください。
実行しているタスクに応じて、設定が若干変更されます。監視タスクを使用すると、Javascript のコンパイルがメモリ内で行われるため、ファイルはディスクに書き込まれず ( ./dist/js/は空になります)、ライブ リロードが機能するようにwebpack-hot-middleware/clientすべてのバンドルに挿入されます。 。実稼働用にビルドする場合、縮小化にはwebpack.optimize.UglifyJsPluginが使用されます。 ./gulpfile.js/util/getWebpackConfig.jsを見て、何が起こっているかを正確に確認し、必要に応じて変更してください。
ここでは、起動して実行するための役立つレシピをいくつか紹介します。
// gulpfile.js/config.js
const js = {
resolve : {
extensions : [ '.js' ] ,
alias : {
// Path relative to `context`
myModule : './myModule/myModule.js' ,
} ,
} ,
} ; // src/js/some-file.js
import myModule from 'myModule' ;
myModule ( ) ;ドキュメント: https://webpack.js.org/configuration/resolve/#resolve-alias
// gulpfile.js/config.js
const webpack = require ( 'webpack' ) ;
//...
const js = {
plugins : [
// Make jQuery global, expected by the plugin.
new webpack . ProvidePlugin ( {
'window.jQuery' : 'jquery' ,
} ) ,
] ,
//...
resolve : {
// Add extensions to prevent linting errors.
extensions : [ '.js' , '.json' ] ,
// Path from `node_modules`, where `myModule` is the module name.
alias : {
myModule : 'myModule/dist/myModule.js' ,
} ,
} ,
} ; // src/js/main.js
import $ from 'jquery' ;
import 'myModule' ;
$ ( '.js-selector' ) . myModule ( ) ; // gulpfile.js/config.js
const js = {
//...
resolve : {
// Add extensions to prevent linting errors.
extensions : [ '.js' , '.json' ] ,
// Path from `node_modules`, where `myModule` is the module name.
alias : {
myModule : 'myModule/dist/myModule.js' ,
} ,
} ,
module : {
rules : [
// ...
{
include : require . resolve ( 'myModule/dist/myModule.js' ) ,
loader : 'exports-loader?MyModule' ,
} ,
] ,
} ,
} ; // src/js/main.js
import $ from 'jquery' ;
import MyModule from 'myModule' ;
const myInstance = new MyModule ( ) ;ドキュメント: https://webpack.js.org/guides/shimming/
複数のバンドルを作成するには、 entryに全体を追加します
// gulpfile.js/config.js
const js = {
// ...
entry : {
main : [ './main.js' ] ,
other : [ './someFile.js' , './sotherOtherFile.js' ] ,
} ,
// ...
} ;これにより、 main.jsとother.jsという 2 つのバンドルが生成されます。
これを行う場合は、すべての共有ベンダー コードを含む別のバンドルを生成することをお勧めします。
// gulpfile.js/config.js
const webpack = require ( 'webpack' ) ;
//...
const js = {
// ...
entry : {
main : [ './main.js' ] ,
other : [ './someFile.js' , './sotherOtherFile.js' ] ,
// List vendor modules here:
vendor : [ 'jquery' , 'svg4everybody' ] ,
} ,
// ...
plugins : [
new webpack . optimize . CommonsChunkPlugin ( {
name : 'vendor' , // Specify the common bundle's name
} ) ,
] ,
// ...
} ;ドキュメント: https://webpack.js.org/guides/code-splitting-libraries/
Gulp-plate は https://github.com/greypants/gulp-starter に基づいています
