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