gulp build front-end compression css, js files, to achieve auto-refresh browser

First, install the node

nodejs comes npm module, open the window after the installation is complete dos command input node -v be able to view nodejs is installed into success

Since npm install module is too slow, it is recommended to use Taobao Mirror: npm install cnpm -g --registry = https: //registry.npm.taobao.org

The installation is complete, view the cnpm -v

Second, the installation gulp

1, gulp installation divided into global and local mounting installation

First of all globally installed: npm install gulp -g

2, the new project directory, and into the project, the project initialization

cnpm init

After executing the command, you can enter all the way, after initialization file is generated package.json

3, partially mounted GULP, and other plug-ins

Execute this command: cnpm install --save-dev gulp browser-sync gulp-clean-css gulp-uglify gulp-minify-css

Require plug-ins are installed in this way, after the installation is complete, you can see the file package.json

4, under the new project directory file gulpfile.js

All code shown below

var gulp = require("gulp")
var cssmin = require("gulp-clean-css")
var uglify = require("gulp-uglify")
var bs = require("browser-sync").create()
var cache = require("gulp-cache")
var imagemin = require("gulp-imagemin")
var rename = require("gulp-rename")

var path = {
    'html':'./templates/**/*.html',
    'css':'./src/css/**/*.css',
    'js':'./src/js/*.js',
    'images':'./src/images/*.*',
    'css_dist':'./dist/css/',
    'js_dist':'./dist/js/',
    'images_dist':'./dist/images/'
}

//解压html
gulp.task("html", function () {
    gulp.src(path.html)
        .pipe(bs.stream())
})


//解压css
gulp.task("css", function () {
    gulp.src(path.css)
        .pipe(cssmin())
        .pipe(rename({
            "suffix":".min"
        }))
        .pipe(gulp.dest(path.css_dist))
        .pipe(bs.stream())
})


//解压js
gulp.task("js", function () {
    gulp.src(path.js)
        .pipe(uglify())
        .pipe(rename({
            "suffix":".min"
        }))
        .pipe(gulp.dest(path.js_dist))

})


//解压images
gulp.task("images", function () {
    gulp.src(path.images)
        .pipe(cache(imagemin()))
        .pipe (gulp.dest (path.images_dist)) 
        .pipe (bs.stream ()) 
}) 

// define listener task 
gulp.task ( "Watch", function () { 
    gulp.watch (path.css, [ ' CSS ']), 
    gulp.watch (path.js, [' JS ']), 
    gulp.watch (path.html, [' HTML ']), 
    gulp.watch (path.images, [' Images']) 
} ) 

// start service 
gulp.task ( "BS", function () { 
    bs.init ({ 
        'Server': { 
            'the baseDir': './' 
        } 
    }) 
}) 

// define default task 
gulp.task ( " default ", [ 'bs', 'watch'])

Project root directory, execute the command: gulp, it will automatically open the browser, re-enter the connection: HTTP: // localhost: 3000 / Templates / the Common / index.html

Modify the contents of index.html inside, then there are two ways:

After a. Modify the file, Ctrl + s save the file

b. After modifying the file, just click your browser

The browser will automatically refresh

Precautions: css introduced index.html file, you need to unzip the file after

gulp build front-end compression css, js files, to achieve auto-refresh browser

Guess you like