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 浏览器实时同步