确保gulp已安装到全局
cnpm install --global gulp
进入项目目录 初始化package.json
nmp init -y
首先将gulp安装到开发依赖
cnpm i gulp --save-dev

安装 自动化插件

• 选择开发时需要的插件 search插件
• 在当前项目安装gulp和插件模块，并且保存到开发依赖
  cnpm i 插件名 --save-dev

1. 编译less的插件
   cnpm i gulp-less --save-dev
2. 压缩css的插件
   cnpm i gulp-clean-css --save-dev
3. 重命名css的插件
   cnpm i gulp-clean-css --save-dev
4. 自动补全 CSS3 前缀
   cnpm i gulp-autoprefixer --save-dev
5. 热刷新web服务器插件
   cnpm i browser-sync --save-dev

   引入gulp和插件模块

• 在gulpfile.js里面，创建gulpfile.js文件并引入gulp和插件模块

  const gulp = require('gulp'); //gulp主模块 const xxx = require('gulp-xxx'); //插件

创建任务 example

gulp.task('less',function () {
    console.log('less');
    gulp
        .src('./styles/less/index.less') //源文件
        .pipe(less()) //编译
        .pipe(gulp.dest('./styles/css')) //输出文件的路径
})

watch自动编译+热刷新

// 开启服务器
gulp.task('browserSync', function () {
    browserSync.init({
        files:['**'],//监听整个项目
        server:{
            baseDir:'./',  // 设置服务器的根目录
            index:'./index.html' // 指定默认打开的文件
        },
        port:8050  // 指定访问服务器的端口号
    });
});
// 观察者
gulp.task('watch',  function () {
    gulp.watch('./styles/less/*.less', ['less']);
    gulp.watch('./styles/css/*.css', ['cleanCss']);
})

gulp.task('default', ['watch', 'browserSync']);

自动构建down
将package.json中的开发依赖复制到 开发项目的package.json中，根据需求修改。
复制gulpfile.js到开发项目中，根据需求修改。