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
oryarn serve
-
build
npm run build
oryarn build
Options And About
-
development environment By modifying the
config\development.js
file, you can change the configuration of the development environment -
production environment By modifying the
config\production.js
file, you can change the configuration of the development environment -
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
-
In
config\development.js
orconfig\production.js
file
let SelfConfig = {
...
// You can add subObject
ImagesOption: {
}
...
}
module.exports = function (config) {
return {
...
// html
HTMLCompile: function () {
...
// You can add this Func ImagesCompile
ImagesCompile: function () {
return src( ...
do code ...
......
}
......
......
- step2
In
config\index.js
file Find funcDevelopCompile
orProductionCompile
// development
function DevelopCompile(config) {
let { HTMLCompile, CSSCompile, JSCompile, LESSCompile, SASSCompile ,BrowserSyncServer} = development(config)
// dev 开启调试服务器 start serve
BrowserSyncServer()
return series(HTMLCompile, CSSCompile, JSCompile, LESSCompile, SASSCompile,
// You can add this Func ImagesCompile
ImagesCompile
Core.Copy("static"), Core.Copy("assets"),
parallel([ Core.WatchCompile([
{ Compile: HTMLCompile, Postfix: "*.html" },
{ Compile: CSSCompile, Postfix: "css/*.css" },
{ Compile: JSCompile, Postfix: "js/*.js" },
{ Compile: LESSCompile, Postfix: "css/*.less" },
{ Compile: SASSCompile, Postfix: "css/*.scss" },
{ Compile: Core.Copy("static"), Postfix: "static/**/*" },
{ Compile: Core.Copy("assets"), Postfix: "assets/**/*" },
// If you want to watch Images, you can add a watcher, Be sure to specify the road strength of the picture
// 如果监听图片,可以添加图片观察者, 请务必说明图片的路径
// { Compile: ImagesCompile, Postfix: /assets\/images\/*.{png,jpg,gif,jpeg}/ },
])])
)
}
// Production
function ProductionCompile(config) {
let { HTMLCompile, CSSCompile, JSCompile, LESSCompile, SASSCompile ,
// You can add this Func ImagesCompile
ImagesCompile
} = production(config)
return series(Core.Clean, HTMLCompile, CSSCompile, JSCompile, LESSCompile, SASSCompile,
// Must be run this Func ImagesCompile
ImagesCompile
)
}
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
)
-
HtmlminOptions You can Click this link: https://github.com/kangax/html-minifier#options-quick-reference
-
CleanCssOption You can Click this link: https://github.com/jakubpawlowicz/clean-css#constructor-options
-
LessOptions You can Click this link: http://lesscss.org/
-
SassOptions You can Click this link: https://github.com/sass/node-sass#options
-
JSUglifyOptions You can Click this link: https://github.com/mishoo/UglifyJS2#minify-options
-
JSBabelOptions You can Click this link: https://babeljs.io/docs/en/options
-
AutoprefixerOptions You can Click this link: https://www.npmjs.com/package/autoprefixer#options
...more
License
ISC License © 2019 AmandaYi