gulp-init

A gulp4 template An init template

Installation

git clone git@github.com:AmandaYi/gulpfile.git gulp-init

Use

---

• development environment npm run serve or yarn serve

• build npm run build or yarn build

Options And About

1. development environment By modifying the config\development.js file, you can change the configuration of the development environment

2. production environment By modifying the config\production.js file, you can change the configuration of the development environment

3. About Picture Processing No... Because everyone's needs are different, some need wizard maps, some need base64, so you can write a function to handle it by yourself. Demo

4. In config\development.js or config\production.js file

1let SelfConfig = {
2    ...
3    // You can add subObject
4    ImagesOption: {
5
6    }
7    ...
8}
9
10module.exports = function (config) {
11    return {
12        ...
13        // html
14        HTMLCompile: function () {
15        ...
16        // You can add this Func ImagesCompile
17        ImagesCompile: function () {
18            
19            return src( ...
20            do code ...
21            ......
22        }
23        ......
24        ......
25

2. step2 In config\index.js file Find func DevelopCompile or ProductionCompile

1// development
2function DevelopCompile(config) {
3    let { HTMLCompile, CSSCompile, JSCompile, LESSCompile, SASSCompile ,BrowserSyncServer} = development(config)
4    // dev 开启调试服务器 start serve
5    BrowserSyncServer()
6    return series(HTMLCompile, CSSCompile, JSCompile, LESSCompile, SASSCompile,
7        // You can add this Func ImagesCompile
8        ImagesCompile
9        Core.Copy("static"), Core.Copy("assets"),
10            parallel([ Core.WatchCompile([
11                { Compile: HTMLCompile, Postfix: "*.html" },
12                { Compile: CSSCompile, Postfix: "css/*.css" },
13                { Compile: JSCompile, Postfix: "js/*.js" },
14                { Compile: LESSCompile, Postfix: "css/*.less" },
15                { Compile: SASSCompile, Postfix: "css/*.scss" },
16                { Compile: Core.Copy("static"), Postfix: "static/**/*" },
17                { Compile: Core.Copy("assets"), Postfix: "assets/**/*" },
18                // If you want to watch Images, you can add a watcher, Be sure to specify the road strength of the picture
19                // 如果监听图片，可以添加图片观察者， 请务必说明图片的路径
20                // { Compile: ImagesCompile, Postfix: /assets\/images\/*.{png,jpg,gif,jpeg}/ },                
21            ])])
22        )
23}
24// Production
25function ProductionCompile(config) {
26    let { HTMLCompile, CSSCompile, JSCompile, LESSCompile, SASSCompile ,
27    // You can add this Func ImagesCompile
28    ImagesCompile
29    } = production(config)
30    return series(Core.Clean, HTMLCompile, CSSCompile, JSCompile, LESSCompile, SASSCompile,
31    // Must be run this Func ImagesCompile
32    ImagesCompile
33    )
34}

Options

By changing the parameters of the object, the environment can be easily adjusted.

The details(Options) are as follows

In config\development.js or config\production.js file You can find SelfConfig object.By changing this object, you can change the configuration of the development environment

List ( Subobjects of SelfConfig )

1. HtmlminOptions You can Click this link: https://github.com/kangax/html-minifier#options-quick-reference

2. CleanCssOption You can Click this link: https://github.com/jakubpawlowicz/clean-css#constructor-options

3. LessOptions You can Click this link: http://lesscss.org/

4. SassOptions You can Click this link: https://github.com/sass/node-sass#options

5. JSUglifyOptions You can Click this link: https://github.com/mishoo/UglifyJS2#minify-options

6. JSBabelOptions You can Click this link: https://babeljs.io/docs/en/options

7. AutoprefixerOptions You can Click this link: https://www.npmjs.com/package/autoprefixer#options

...more

License

---

ISC License © 2019 AmandaYi