Gulp插件使用详情
Gulp插件:基于流的自动化构建工具
gulp和grunt对比
grunt目前的工作流程:读文件、修改文件、写文件——读文件、修改文件、写文件——…
gulp目前的工作流程:读取文件——修改文件——修改文件…——写文件
话不多说,直接上安装教程:
- 先全局安装这个插件,因为复用率比较高!(项目得开发依赖安装)
npm install --global gulp
npm i gulp -g //简写方式
//官方地址 https://www.npmjs.com/package/gulp
//局部
npm install --save-dev gulp
- 在你的项目根目录下面创建一个gulpfile.js的文件
- 重构项目的文件夹结构src,目录放置你写的源代码文件,dist目录下面放置构建的文件(以免出错,建议新手先保存好代码,在新的文件夹下面先创建gulpfile.js,在分别创建src以及dit文件夹,把源代码放入src里面)
//这里的src文件夹是放源代码的
//dist目录是给压缩的文件
- 在gulpfile.js 文件夹中编写任务
//引入模块
const gulp = require('gulp')
gulp'.task('执行的名字',function(){
// 放你要执行的代码
})
- 在命令工具中执行gulp任务
//这边需要安装一个专门运行gulp任务的cli
npm install gulp-cli -g //全局安装
//这个工具有点像npm,git,都是命令行运行工具
//运行 npm 任务名称
实例
- gulp-src():获取任务要处理的文件
- gulp-dest() :输出文件
- gulp-task() :建立 gulp任务
- gulp-watch():监控文件的变化
gulp-htmlmin :文件压缩
gulp-csso :压缩css
gulp-babel:javaScrip语法转换
gulp-uglify:压缩混淆JavaScript
gulp-less:less语法转换成css
gulp-file-include:公共文件包含
browsersync:浏览器实时同步
const gulp = require('gulp')
//使用gulp.task创建任务
gulp.task('FirstTask',()=>{
//获取要处理的文件
gulp.src('./src/css/1.css')
.pipe(csso())
//将处理后的文件输出到dist目录中
.pipe(gulp.dest('./dist/css'))
})
后面的使用可以在官方地址 https://www.npmjs.com/package/gulp 里面查看使用的教程!!!!!!一切以官方教程为准!