gulp-init v1.1.1
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 environmentproduction environment By modifying the
config\production.js
file, you can change the configuration of the development environmentAbout 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