node.js前端使用gulp压缩文件并且更改文件后自动刷新浏览器

node.js前端使用gulp压缩文件并且更改文件后自动刷新浏览器

使用版本为node.js8.9.3 + npm5.5.1
版本是个很大的坑，测试多个版本后还是这个好用。

gulp的使用方法

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var bs = require("browser-sync").create()


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

//处理html的任务
gulp.task("html",function (done) {
     
    gulp.src(path.html+'*.html')
        .pipe(bs.stream())
    done()
});

//处理css的任务
gulp.task("css", function (done) {
     
    gulp.src(path.css + '*.css')
        .pipe(cssnano())
        .pipe(rename({
     "suffix": ".min"}))
        .pipe(gulp.dest(path.css_dist))
        .pipe(bs.stream())
    done()
});

//处理js的任务
gulp.task("js", function (done) {
     
    gulp.src(path.js + '*.js')
        .pipe(uglify())
        .pipe(gulp.dest(path.js_dist))
        .pipe(bs.stream())
    done()
});

//处理图片文件的任务
gulp.task('images', function (done) {
     
    gulp.src(path.images + '*.*')
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.images_dist))
        .pipe(bs.stream())
    done()

});

gulp.task("test", function (done) {
     
    console.log('ok');
    done()
});

//定义监听文件修改的任务
gulp.task("watch", function () {
     
    gulp.watch(path.html + '*.html', gulp.series('html'));
    gulp.watch(path.css + '*.css', gulp.series('css'));
    gulp.watch(path.js + '*.js', gulp.series("js"));
    gulp.watch(path.images + '*.*', gulp.series("images"));
});

//初始化brower-sync的任务
gulp.task("bs", function (done) {
     
    bs.init({
     
        'server': {
     
            'baseDir': './'
        }
    })
});

//创建一个默认的任务
gulp.task("default", gulp.parallel('watch', 'bs'));