前端构建工具—Gulp

概述：基于node平台开发的前端构建工具

• Gulp能做什么？
  1）项目上线，Html、CSS、JS文件压缩合并
  2）语法转换（es6，less）
  3）公共文件抽取

• Gulp使用
  1、npm install gulp下载gulp库文件
  2、项目的根目录下建立gulpfile.js文件
  3、重构项目的文件夹结构：src目录放置源代码文件dist目录放置构建后文件
  4、在gulpfile.js文件中编写任务
  5、在命令行工具执行gulp任务

• gulp中的方法
  gulp.src()：获取任务要处理的文件
  gulp.dest()：输出文件
  gulp.task()：建立gulp任务
  gulp.watch()：监控文件的变化

// 使用gulp.task(name,callback)建立任务
gulp.task('first', () => {
    console.log('first gulp task')
        // 获取要处理的文件
    gulp.src('./src/css/base.css')
        //输出到指定目录(会自动创建)
        .pipe(gulp.dest('./dist/css'))
})

运行：
1.下载命令行工具 npm install gulp-cli
2.gulp 任务名（first）

• Gulp插件
  详情链接
  
  1、编译
  2、合并
  3、压缩
  4、优化
  5、资源注入
  6、模板
  7、代码校验
  8、实时加载
  9、缓存
  10、流控制
  11、日志
  12、测试