gulp简易配置热更新+编译less+编译es6+压缩js、html

更新版在这里

2018.5.28

---

需要用到的npm包有：

• gulp
• browserSync
• gulp-htmlmin
• gulp-less
• gulp-uglify
• gulp-babel
• babel-preset-es2015
  
  

请自行百度安装



参考如下目录结构

project
│   gulpfile.js
│
│   package.json
│
│   package-lock.json
│ 
└───node_modules
│
└───build       //开发环境，源文件
│   │   index.html
│   │   index.js
│   │   index.less
│   
│
└───dist            //编译输出后的文件
    │   index.html
    │   index.js
    │   index.css

引入各种依赖

---

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var htmlmin = require('gulp-htmlmin');
var less = require('gulp-less');
var uglify = require('gulp-uglify');
var babel = require("gulp-babel"),
    es2015 = require("babel-preset-es2015");

编译less

---

gulp.task('less', function () {
    return gulp.src('build/*.less')
                .pipe(less())
                .pipe(gulp.dest('dist/'))
                .pipe(reload({stream:true}));
})

编译、压缩js

---

gulp.task('js', function () {
    return gulp.src('build/*.js')
        .pipe(babel({presets:[es2015]}))
        .pipe(uglify())        
        .pipe(gulp.dest('dist/'))
        .pipe(reload({stream:true}));
});

压缩html

---

gulp.task('html', function () {
    var options = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值
        removeComments: true, //清除html注释
        removeEmptyAttributes: true, //删除所有空格做属性的值
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true,   //压缩页面JS
        minifyCSS: true    //压缩页面CSS
    };
    return gulp.src('build/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/'))
        .pipe(reload({stream:true}));        
});

架设静态服务器、文件修改热更新

---

gulp.task('serve', ['less','html','js'],function() {
    browserSync({
      server: {
        baseDir: './dist/'
      }
    });

    gulp.watch(['build/*.less'],['less']);
    gulp.watch(['build/*.js'],['js']);
    gulp.watch(['build/*.html'],['html']);
});

最后

---

[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000  
    External: http://192.168.1.89:3000 //其他终端访问地址
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.89:3001
 -------------------------------------

打开你的另一个显示器or其他的终端设备，终端/命令行输入gulp serve，解放F5，开始愉快的编写代码！：）