gulp plate下載 - gulp plate原始碼下載

gulp plate

其他類別

1.0.0

下載

吞口板

Gulp 樣板和建置系統。

包括以下工具、任務和工作流程：

Webpack 作為 JavaScript 模組捆綁器
webpack-dev-middleware 用於即時重新載入（在記憶體編譯中，以便在開發時更快重建）
使用 Babel 轉譯的 ES2015 語法
用於 JavaScript linting 的 ESLint
JavaScript 程式碼格式化更漂亮
使用 libsass、來源映射、自動前綴器和 Sass linting 編譯 SASS
用於即時重新載入和靜態伺服器的 BrowserSync
svgo 用於 SVG 壓縮。
gulp-svg-symbols 用於產生帶有<symbol>和<use>標籤的 SVG 圖示精靈

正在尋找 SilverStripe 版本？看這裡。

依賴/安裝

Gulp-plate 依賴以下技術：

node.js 作為 gulp 的本機主機環境（v. 7.5.0 或更高版本）[1]
gulp 作為任務運行者
紗線作為依賴管理器

[1] 建議透過nvm（Node Version Manager）安裝node。

開始使用：

$ 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

運行預設任務一次，啟動伺服器並觀察檔案變更。

 # 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

重要的：

每次執行build/watch/prod時dist目錄都會被刪除。不要在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 。根據項目的結構和需求調整路徑和設定。

SVG 精靈配置

精靈在./dist/images/中建立一個名為sprite.svg的映像。它也會在./src/sass/base/中建立一個名為： _sprite.scss的 Sass 檔。

產生的 Sass 檔案包含有關精靈圖示的有用信息，例如每個圖示的尺寸。每次新增、刪除或變更圖示時，檔案都會更改，請勿手動編輯。您可以透過變更./gulpfile.js/tpl/_sprite.scss中的範本來變更檔案。

靜態資產

從來源目錄移動靜態資源而不進行轉換，例如字體檔案。將src和dest路徑加入config.js中的static陣列中

HTML 模板

模板使用 Nunjucks。有關如何使用它們的更多信息，請參閱文檔。

薩斯

預設使用 Sass 縮排語法。主Sass檔需要有.sass副檔名，否則編譯器會失敗。部分可以是.sass和.scss 。

包含外部供應商 css 文件

若要在 css 中包含第三方樣式，請將它們包含在main.sass檔案中：

 // main.sass

@import url( ' ../../node_modules/normalize.css/normalize.css ' ) ;

然後 postcss 外掛程式將內聯保留來源映射的檔案。 Sass編譯後。

請注意，Sass 會將@import url(...)語句移到產生的 CSS 檔案的頂部，因此無論包含位置為何，這些樣式將始終包含在檔案的頂部。

Sass-lint 錯誤

在撰寫本文時， sass-lint在遇到空選擇器時會失敗。這是一個錯誤，可以透過在空選擇器後面加上縮排註解//來防止：

 .mySelector
  //

.mySelector_child
  text-align : center

JavaScript

./gulpfile.js/config.js檔案包含完整的 webpack 設定（請參閱js變數）。請根據需要隨意更改。請記住， babel-loader應該始終存在，因為eslint將依賴它。

根據您正在運行的任務，配置將略有變更。使用 watch 任務時，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

調整非 CommonJs 模組

jQuery 插件

 // 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 ( ) ;

常規 JavaScript 模組

 // 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/

多個 JavaScript 包和供應商程式碼共享

若要建立多個捆綁包，請將整體新增至entry

 // gulpfile.js/config.js

const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
  } ,
  // ...
} ;

這將產生兩個套件： main.js和other.js 。

如果您這樣做，產生另一個包含所有共享供應商代碼的套件可能是個好主意：

 // 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
    } ) ,
  ] ,
  // ...
} ;