关于gulp:Gulp

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 ：压缩css
gulp-babel ：JavaScript语法转化
gulp-less: less语法转化
gulp-uglify ：压缩混同JavaScript
gulp-file-include 公共文件蕴含
browsersync 浏览器实时同步