Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 进行构建的。
* 全局安装 (全局安装 是因为要使用 Gulp 命令,局部安装是因为要 压缩项目)
npm install -g gulp
* 本地安装
npm install gulp--save-dev
* 初始化项目
npm init -y
* 编写 gulpfile.js 文件 (在项目文件中创建gulpfile.js)
创建具体的任务 (引入各种包)
* 安装相应gulp任务插件
npm install gulp-file-include gulp-less less gulp-autoprefixer gulp-cssmin gulp-uglify gulp-babel babel-core babel-preset-env gulp-htmlmin browser-sync --save-dev
****** gulpfile 文件:
const path = require('path'); //路径
const gulp = require('gulp'); // gulp本地包，用来提供api
const less = require('gulp-less'); // 处理less
const autoprefixer = require('gulp-autoprefixer'); // 自动添加兼容前缀
const cssmin = require('gulp-cssmin'); // 压缩css
const uglify = require('gulp-uglify'); // 压缩js
const babel = require('gulp-babel'); // ES6语法转化
const htmlmin = require('gulp-htmlmin'); // 压缩HTML
const browserSync = require('browser-sync').create();const reload = browserSync.reload; // 调试
// 处理css
gulp.task('css',function(){
gulp.src(path.join(__dirname,'src','css/*'))
.pipe(less()).pipe(autoprefixer()).pipe(cssmin())
.pipe(gulp.dest(path.join(__dirname,'dist','css')));})
// 处理js
gulp.task('js',function(){
gulp.src(path.join(__dirname,'src','js/**/*.js'))
.pipe(babel({presets: ['env']}))
.pipe(uglify()).pipe(gulp.dest(path.join(__dirname,'dist','js')))})
// 处理html
gulp.task('html',function(){
gulp.src(path.join(__dirname, 'src/view/*.html'))
.pipe(htmlmin({ // 把html交给htmlmin插件处理
collapseWhitespace:true, // 设置参数去除空白
minifyJS:true, // 压缩html中的js
minifyCSS:true, // 压缩html中的css
removeComments:true // 去除html注释
})).pipe(gulp.dest(path.join('dist')));})
gulp.task('build',['css','js','html']);
// 调试
gulp.task('dev',['build'],function(){
browserSync.init({
server: {baseDir:"./dist" // 监控目录的基准路径
},
port:8888, // 配置服务端口
notify:false // 设置页面是否有提示信息
});
// 具体监听什么
gulp.watch(path.join(__dirname,'src',"view/**/*"), ['html']).on('change', reload);
gulp.watch(path.join(__dirname,'src',"css/**/*"), ['css']).on('change', reload);
gulp.watch(path.join(__dirname,'src',"js/**/*"), ['js']).on('change', reload);});
// 默认任务配置
gulp.task('default',['dev'])
