1.Gulp介绍
gulp是基于node平台开发的前端构建工具,将机械化操作编写成任务,用机器代替手工提高开发效率。当项目开发完成,部署到线上运行的时候,将HTML、CSS、JS文件压缩合并。还可以语法转换,例如ES6、LESS、SASS。Gulp的作用还有:将公共文件抽离、修改文件浏览器自动刷新。
2.Gulp的使用
(1) 下载:npm install gulp
(2)在项目根目录下建立gulpfile.js文件
(3)重构项目的文件夹结构src目录放置源代码文件,dist目录放置构建后文件
(4)在gulpfile.js文件中编写任务
(5)在命令行工具中执行gulp任务
3.gulp中提供的方法
gulp.src() 获取任务要处理的文件
gulp.dest() 输出文件
gulp.task() 建立gulp任务
gulp.watch() 监控文件的变化
4.gulp命令行工具
gulp中提供了命令行工具可以执行命令(安装):npm install gulp-cli -g (-g是全局安装,当前项目可用,其他项目也可用)
clear:清屏
命令语句: gulp+空格+要执行的命令
e.g: gulp first
复制文件e.g:
//通过gulp.task建立任务
//参数一:任务的名称 参数二:任务的回调函数
gulp.task('first',()=>{
console.log('第一个gulp任务执行了!')
//使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
//要处理的代码必须写在pipe中
.pipe(gulp.dest('dist/css'))
})
5.gulp插件
gulp-htmlmin: html文件压缩
gulp-csso: 压缩css文件
gulp-babel: js语法转换
gulp-less: less语法转换
gulp-uplify: 压缩混淆的js
gulp-file-include: 公共文件包含
browsersync: 浏览器实时同步
插件的使用:
(1)下载插件
(2)引入插件
(3)调用插件
详细请参考:https://www.npmjs.com