GULP
gulp is a front-end development process of the code build tools she can not only website resource optimization, but also in the development process, many repetitive tasks can use the right tools to automate; use her, we can not only be very happy to write code, but also greatly improve our efficiency.
gulp is based Nodejs automated task runner, she was able to complete the test automation javascript / coffee / sass / less / html / image / css and other documents, inspection, consolidation, compression, formatting, browser automatically refresh, deployment file generating, and listens file repeat these steps in the specified changes. On realization, she draws on the Unix operating system pipe (pipe) thought, the output of the previous stage, directly into the input stage, makes it very simple in operation.
gulp and grunt is very similar, but frequently IO operations compared to the grunt of, gulp stream operations, can more easily build work done faster.
gulp is based note.js First make sure you have installed the node.js
Optional CNPM
npm plug-ins are on a foreign server, because the network is relatively large fluctuations. So we can go to Taobao to make a great contribution to our
web site http://npm.taobao.org
# 1 Install Taobao mirrored
his command: npm install -g cnpm --registry = https : //registry.npm.taobao.org
# 2. Build the project description file packge.json
cnmp the init (can replace the init npm)
(required project name, version number, description, entry file, run the command, author, press the Enter key certificate --- have been enough)
# 3 globally installed GULP
CNPM i GULP @ 3 -g
** ** global installed GULP
** @ 3 represents the third generation version of the selected version **
** ** i shall install
** - G is, --global **
gulp -v // you can view the installed version number
# 4 is mounted within the current directory module gulp
CNPM I gulp. 3 @ -D
CNPM I gulp. 3 @ -S (choose one understand the words proposed election S)
** - D-dependent abbreviation --save -dev development **
** -S abbreviation --save project depends **
developers rely on: the development process need to rely on the module, no timeline on the project module --- code format check module
project depends: on-line project still need to use the module
if you I do not know you wrote -S
# 5 creates file gulpfile.js, arranged GULP;
`` `
const = GULP the require ( 'GULP')
` ``
Then we can try to do something with a gulp
## 5.1 Creating a html index using gulp complete assignment of the index, and copied to dist directory of the current directory
`` `
gulp.task ( 'Copy-index', function () {
gulp.src ( './ index.html')
.pipe (gulp.dest ( 'dist'))
}
`` `
then the command line gulp copy-index will find more of a directory dist
## 5.2 Copy gulp / css / a.css and gulp / css / b.css
# 5.2.1 to gulp copied to dist / CSS
`` `
gulp.task (" CoPt-CSSS ", function () {
gulp.src (" ./ CSS / ** / * ") // Copy the folder and CSS file folder
.pipe (gulp.dest ( "dist / CSS"))
})
`` `
command line gulp copy-css
5.2.2 css file # combined
to add the concat module -s-GULP I CNPM
`` `
const = the require the concat (" GULP-the concat ")
gulp.task (" CoPt-CSSS ", function () {
gulp.src (" ./css/**/* ")
.pipe (concat (" the main.css ")) // merge
.pipe (gulp.dest (" dist / CSS "))
` ``
# 5.2.3 css compression
to add modules GULP-Minify-I CNPM css -s
`` `
const = minifyCss the require (" GULP-Minify-css ")
gulp.task (" CoPt-CSSS ", function () {
GULP. src ( "./ CSS / ** / *")
.pipe (concat ( "the main.css"))
.pipe (minifyCss ()) // compression
.pipe (gulp.dest ( "dist / CSS"))
` ``
# 5.2.4 also want to want to get compressed uncompressed
need to add modules cnpm i gulp-rename -S
```
const rename = require("gulp-rename")
gulp.task("copt-csss",function(){
gulp.src("./css/**/*")
.pipe(concat("main.css"))
.pipe(gulp.dest("dist/css))
.pipe(minifyCss())
.pipe(rename("main.min.css"))
.pipe(gulp.dest("dist/css"))
```
## 5.3 Copy js file
###复制js文件
```
gulp.task("copy-js",()=>{
gulp.src("./js/**/*")
.pipe(gulp.dest("dist/js"))
}）
```
Js code ### to merge dist / js
`` `
gulp.tast (" Copy-js ", () => {
gulp.src (" ./ js / ** / * ")
.pipe (the concat (" main , js "))
.pipe (gulp.dest (" dist / js "))
})
` ``
### compressed js
adding module cnpm i gulp-uglify -S
Js compression module
`` `
Gulp.tast (" JS-Copy ", () => {
gulp.src (" ./ JS / ** / * ")
.pipe (" concat.js ")
.pipe (uglify (" main, js "))
.pipe (gulp.dest (" dist / js "))
})
` ``
### and compresses js file rename
```
gulp.tast("copy-js",()=>{
gulp.src("./js/**/*")
.pipe("concat（”main.js“）")
.pipe(gulp.dest("dist/js"))
.pipe(uglify()) //压缩js
.pipe(concat("main.min,js"))
.pipe(gulp.dest("dist/js"))
})
```
##5.4 gulp/asses ---图片
###复制图片到 dist/assets
```
gulp.task("copy-images",()=>{
gulp.src("./assets/**/*")
.pipe(gulp.dest("dist/assets"))
})
`
### compressed pictures
adding module
CNPM I GULP-imagemin -S
`
const = imagemin the require ( "GULP-imagemin")
gulp.task ( "Copy-Images", () => {
gulp.src ( "./assets/**/*")
.pipe (imagemin ()) // compress pictures
.pipe (gulp.dest ( "dist / Assets"))
})
`` `
## process data
without their backend interface analog data
replication
`` `
gulp.task (" Copy-Data ", () => {
gulp.src (" ./ Data / ** / * ")
.pipe (gulp.dest ( "dist / the Data"))
})
`` `
# 6. disposable perform multiple tasks
task names do not own arbitrary definition, write Build
` ``
gulp.task ( "Build", [ "Copy -index "," Copy-CSS "," JS-COPE "," Copy-Images "," Copy-Data "], () => {
the console.log (Success)
})
` ``
# server 7.gulp
GULP -S i-Connect CNPM
server task can not change the name
`` `
gulp.task (" server ", () => {
connect.server ({
// illustrate the root directory of the server
root:" dist ",
livereload:true // Live Update
})
})
`` `
# 8 detects html files .css.js.data. change the picture, perform different tasks
` ``
gulp.task("watch",()=>{
gulp.watch("index.html",["copy-index"])
gulp.watch("./css/**/*",["copy-css"])
gulp.watch("./js/**/*",["copy-js"])
gulp.watch("./assets/**/*",["copy-images"])
gulp.watch("./data/**/*",["copy-data"])
})
````
# 9 while the default execution server tasks and watch the task
`` `
gulp.task (" default ", [" server "," watch "])
` ``
# --- 10 hot update automatically update page
data in the page css js pictures later add a sentence related tasks, restart the server
`` `
.pipe (connect.reload ())
` ``