Gulp

基于node平台开发的前端构建工具，将机械化操作编写成工作，想要执行机械化操作只须要输出命令即可，用机器执行手工，进步开发效率

### Gulp的作用

  • 我的项目上线 HTML CSS JS文件压缩合并
  • 语法转换（es6,less等等）
  • 公共文件抽离
  • 批改文件浏览器主动刷新

Gulp的应用

命令行工具：npm install cli -g

  • 应用npm install gulp下载gulp库文件
  • 在我的项目根目录下建设gulpfile.js文件
  • 重构我的项目的文件夹构造 src目录搁置源代码文件 dist目录搁置构建后文件
  • 在gulpfile.js文件中编写工作.
  • 在命令行工具中执行gulp工作

Gulp中提供的办法

gulp.src()：获取工作要解决的文件gulp.dest()：输入文件gulp.task()：建设gulp工作gulp.watch()：监控文件的变动
// 引进gulp模块const gulp = require('gulp');// 建设gulp工作gulp.task('first', () => {    //获取要解决的文件    gulp.src('./src/1.hello word.js')        // 将解决好的工作输入到dist目录        .pipe(gulp.dest('./dist'))})

Gulp插件

gulp-htmlmin ：html文件压缩gulp-csso ：压缩cssgulp-babel ：JavaScript语法转化gulp-less: less语法转化gulp-uglify ：压缩混同JavaScriptgulp-file-include 公共文件蕴含browsersync 浏览器实时同步