Use gulp building automation project is an important part of the front end of learning, gulp node.js. choice depends on the computer you want to configure node and npm.
View node version number
node --version
View npm version
npm --version
First, install gulp
1, the global installed gulp
npm install gulp –g
My project structure as shown below
2, in the root folder npm init
Enter up until OK? Yes will enter a carriage return file package.json (exemplified here as the root folder gulp-app)
3, configuration item gulp environment, opens a terminal at the root or cmd:
npm install gulp --save-dev
Will exist after the success in the package.json gulp configuration Note: This version must gulp gulp and your global version of the same, as shown below
4, install the plug
These plug-ins are required to use in your project, you may also need other plug-ins can be installed in a gulp own document (Document address: https://www.gulpjs.com.cn/docs/getting-started/quick-start/ )
npm isntall end-of-stream --save-dev npm isntall gulp-autoprefixer --save-dev npm isntall gulp-clean --save-dev npm isntall gulp-concat-dir --save-dev npm isntall gulp-connect --save-dev npm isntall gulp-imagemin --save-dev npm isntall gulp-less --save-dev npm isntall gulp-livereload --save-dev npm isntall gulp-minify-css --save-dev npm isntall gulp-minify-html --save-dev npm isntall gulp-plumber --save-dev npm isntall gulp-run-sequence --save-dev npm isntall gulp-uglify --save-dev npm isntall gulp-zip --save-dev npm isntall opn --save-dev
Second, create gulpfile.js in the root directory gulp-app. js file which reads as follows
// use require the introduction of all the modules required, Gulp.js is constructed based Node.js
// as follows CommondJS Node.js specification
// CommondJS Modules which has a specification module that it can be loaded in a synchronous mode
var gulp = the require ( 'GULP'),
// compression JS
uglify the require = ( 'GULP-uglify'),
// compile less
less the require = ( 'GULP-less'),
// compression CSS
minifyCss the require = (' GULP-minify- CSS '),
// prefix automatic completion
autoprefixer the require = (' GULP-autoprefixer '),
// compressing the HTML
minifyHtml the require = (' HTML-GULP-Minify '),
// compressed picture
imagemin = require (' gulp-imagemin '),
// pipe consolidation, you can combine all the files in the same directory, the benefits can reduce network requests
concat = the require (' GULP-concat-dir '),
// error handling tips plug
plumber = require (' gulp-plumber '),
//Compressed file
= the require ZIP ( 'GULP-ZIP'),
= the require Connect ( 'GULP-Connect'),
// the control task of serial and parallel. (Default GULP parallel)
when a plurality of tasks // serial means, each task executed in order to complete before the next one after.
// parallel means that multiple tasks can be performed simultaneously.
= The require RunSequence ( 'GULP-RUN-Sequence'),
// to delete the file
Clean = The require ( 'GULP-Clean');
// create a task named default (above tasks can not, but this task there must be, or execute command given gulp) terminal
// input terminal gulp command, default task performed by default, and perform tasks redist
gulp.task ( 'default', [ 'redist'], function () {
gulp .start ( 'Server');
});
// local debugging environment local
gulp.task ( 'Server', [ 'Build', 'Watch'], function () {
connect.server ({
the root: 'dist',
Port: 8000,
livereload: to true
});
the require ( '
gulp.task ( 'Build', [ 'JS', 'Images', 'less', 'public', 'HTML']);
/ / create a task named js in
gulp.task ( 'js', function () {
// first of all to get the .js file under app / static / scripts (** / is meant to encompass all sub-folders)
gulp.src return ( 'App / static / scripts / ** / *. JS')
.pipe (connect.reload ()) // reloaded
// error management module (automatically prompts to the output terminal with errors)
.pipe (plumber ())
all files in the same directory // combined, and the combined directory name as the file name of the merged
.pipe (the concat ({EXT: '.js'}))
// JS compression
.pipe (uglify ())
// the output file into the compressed merged dist / static / scripts (if not directory is generated automatically dist dist directory)
.pipe (gulp.dest ( 'dist / static / scripts'))
}) ;
// Create a task called less of
gulp.task ( 'less', function ( ) {
// First, get all the files for the .less the app / static / less (** / is meant to encompass all subfolders) less files (* / means is to include all sub-folders)
return gulp.src ( 'App / static / less / ** / *. less')
.pipe (connect.reload ()) // reload
// error management module (there will automatically prompt output to the terminal when an error)
.pipe (Plumber ())
// compiled less css file to convert it to a file
.pipe (less ())
// prefix auto-complete plug
.pipe (autoprefixer ())
/ / merge all files in the same directory, and the combined directory name as the file name of the merged
.pipe (the concat ({EXT: '.css'}))
// CSS compression
.pipe (minifyCss ())
// the combined output to the compressed file dist / static / css (if not directory is generated automatically dist dist directory)
.pipe (gulp.dest ( 'dist / static / CSS'))
});
// Create a named html the task
gulp.task ( 'HTML', function () {
// first of all to get .html files (** / meaning in app / views include all subfolders)
return gulp.src ( 'App / views / ** / *. html ' )
.pipe (connect.reload ()) // reload
// error management module (automatically prompt output to the terminal when there is an error)
.pipe (Plumber ())
// HTML compression
optimizationLevel:. 5, // type: Number default: 3 range: 0-7 (optimization grade)
.pipe (minifyHtml ())
// the compressed file is output to the dist / views (if the directory is generated automatically without dist dist directory)
.pipe (gulp.dest ( 'dist / views'))
});
// create a task named images
gulp.task ( 'images', function () {
// first of all to get under the app / static / images. {png , jpg, jpeg, ico, gif, svg} image file suffix (** / means include all subfolders)
return gulp.src ( 'App / static / Images / ** / *. {PNG, JPG, JPEG, ICO, GIF, SVG}')
.pipe (Connect. reload ()) // reloaded
// error management module (automatically when the system outputs an error to the terminal)
.pipe (Plumber ())
.pipe (imagemin ({
Progressive: to true, // type: Boolean default: false lossless compression jpg image
interlaced: true, // type: Boolean default: false interlaced gif render
multipass: true // type: Boolean default: false optimization svg times until fully optimized
}))
// The compressed picture is output to the dist / static / images (if the directory is generated automatically without dist dist directory)
.pipe (gulp.dest ( 'dist / static / Images'))
});
// Create a name to clean task
gulp.task ( 'clean', function ( ) {
all files // first get dist / * in
return gulp.src ( 'dist / *', {the Read: false})
// delete dist / * all files
.pipe (Clean ())
})
// create a task named public
gulp.task ( 'public', function ( ) {
all files // first get dist / * in
return gulp.src ( 'dist / ** / *')
// error management module (automatically output when the error to the terminal)
.pipe (Plumber ())
// the dist / * all files in the package is compressed file generated as public.zip
.pipe (ZIP ( 'public.zip'))
// generated public.zip file output to the next release (if no release directory is generated automatically release directory)
.pipe (gulp.dest ( 'release'))
})
// Create a task called watch
gulp.task ( 'Watch', [ 'Build'], function () {
// monitor each directory file, if there is task change operation is performed corresponding file
gulp.watch ( 'app / static / scripts / ** / .js * ', [' JS ']);
gulp.watch (' App / static / less / ** / * less ', [' less '].);
gulp.watch (' App / views / ** / .html * ', [' HTML ']);
})
// create a task called the redist
gulp.task (' redist ', function () {
// first run clean, and then run in parallel html, js, less, ImagesRF Royalty Free, Watch
// If you do not use the plug-gulp-run-sequence, then because gulp is performed in parallel
// there might be a case (other document processing speed of the process has been finished, and then clean finally implemented, will front of the file processed deleted, so use the RunSequence)
RunSequence ( 'Clean', [ 'HTML', 'less', 'JS', 'Images', 'Watch'])
})
Creating index.html In app ==> views love file
After running gulp command in the root directory. Automatically opened in a browser http: // localhost: 8000 /
Click views will automatically refresh will see index.html interface, modify the content within the app after saving