gulp build tool is based on the automated node
gulp can be doing? Auto-refresh browser 1. compression JS, css files 2. 3. Merge files automatically compiles SASS4. 5. Save automatically compress images
npm init ----> initialize a gulp environment, create a file package.json
--save: The information stored in the package.json
--dev: The information in devDependencies node in package.json
Of course, to give it a position with a gulp it! gulpfile.js is gulp project configuration file is located in the root directory of the ordinary JS file
is usually gulpfile pakage node_modules three files together.
Add deployment file:
1, the input source of
the input source (a file path operation) gulp.src (file path)
the src source file by specifying a path to be processed, the reference GULP Unix operating system pipe (pipe) thinking, the output of the previous stage, after an input directly into, gulp.src returns the current file is available to plug-flow
file path settings:
a, a single folder: "the src / JS / the index.js";
B, all matching documents: "*" Example: . src / * js ---> src below all js file
c, matches zero or more sub-folders: "**" For example:. scr / ** / * js ---> src or below 0 js file plurality of subfolders
d, a plurality of attributes matching: {} example: src / {a, b} .js ---> src and following a.js b.js src / * {jpg, png ,. gif} ---> src all of the following jpg png gif files
e, exclude file:! For example:! Scr.a.js ---> src excluded below a.js document
2, input via conduit
pipe: pipe ()
. 3, the source output: the output parameter is the file where
dest ()
Chestnut:
Copy:. Gulp.src ( "src / ** / *") pipe (gulp.dest ( "dist / js"))
合并：gulp.task("addDate",function(){
gulp.src(["src/json/**/*","src/xml/**/*"])
.pipe(gulp.dest("dist/data"))
})
gulp Advanced: ---> Of course you need to load plug-ins! ! ! ! !
--- Image Compression 1. Plug the install GULP-imagemin --save CNPM dev-
var = imgmin the require ( "GULP-imagemin"); ---> image compression module incorporated
gulp.task ( "imgmin", function ( ) {
// compress all the pictures
gulp.src ( "src / imgs / ** / *")
// first through the pipeline compression, and then through INFO_PRINT_COMMAND dist folder
.pipe (imgmin ())
. pipe (gulp.dest ( "dist / imgs"))
})
--- compression 2.Js the install command line installation GULP-uglify --save CNPM dev-
var = JSMin the require ( "GULP-uglify"); ---> Js compression module incorporated
gulp.task ( "Jsmin", function () {
// all the JS compression
gulp.src ( "the src / JS / JS * .js")
// first conduit by compression, and then output to the dist folder via conduit
.pipe (jsMin ())
.pipe (gulp.dest ( "dist / JS / JS"))
})
3. compilation and compression sass ---- CSS> CNPM the install GULP-sass China --save-dev-
var = the require CSS ( "GULP-sass-China") // introduced sass compiled modules
// open tasks
gulp. Task ( "cssmin", function () {
// following the SCSS scss sass all files are compiled
gulp.src ( "SCSS / ** / *. {SCSS, Sass}")
// compiled through a pipe, and then the piped be in src / css folder,
// if you want to transfer, then compression parameters compressed in a compact format which css
.pipe (css ({
outputStyle: "compressed"
}))
.pipe (gulp.dest ( " the src / CSS "))
})
4. The Listener
Although the above can be compiled and sass compression but not if you write a file css files inside the sass which changed! And both need to run the terminal every time. Particularly troublesome. First listen does not exist can be used in conjunction with the task alone!
/ *
Listener: gulp.watch ()
two arguments: 1. 2. monitor what files are changed when a file is changed to perform which task --- "(a collection of)
* /
gulp.task (" SCSS " , function () {
gulp.task ( "SCSS / ** / *. {SCSS, Sass}", [ "cssmin"])
})
The server ---> cnpm install gulp-connect --save
-dev parameters:
the root: Set the directory
port: Port number
livereload: When set to true, automatically detects changes gulp file and then automatically construct source
/ * setting up a local server * /
var = Connect the require ( "GULP-Connect");
gulp.task ( "server", function () {
connect.sercer ({
the root: "the src", // path
port: 123, // port number
livereload: true, // file change detecting
})
})
6. Auto refresh
/ * set up a local server * /
var = Connect the require ( "GULP-Connect");
gulp.task ( "server", function () {
Connect the .server ({
the root: "the src",
Port: 123,
livereload: to true,
})
})
/ * Automatic refresh * /
// Server + Watch with attention to service can only be one listener
// so we need to refresh and server open into two parts
gulp.task ( "server-watch", funcion () {
gulp.watch ( "the src / index.html", function () {
gulp.src ( "the src / index.html"). pipe (connect.reload ())
})
gulp.task ( "Task-Server", [ "server", "server- watch"])
7.转义ES6 gulp-babel--->cnpm install --save-dev gulp-babel @babel/core @babel/preset-env
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('babel', () =>
gulp.src('src/es6.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'))
);
})
This article is for reference hua brother, the reason code it is easy to experience a system, but also easier to remember! !