Gulp 安装环境:

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'])