更新版在这里
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,开始愉快的编写代码!:)