1、安装
npm install gulp-cli -g 全局
npm install gulp -D 当前项目的dev里 可以require到
thouch gulpfile.js 在当前文件夹下创建一个gulpfile.js文件
gulp --help 使用简介
2、初始化
(1)、npm init //初始化package.json文件
(2)、在npm install --save-dev gulp //安装gulp
(3)、npm install gulp-cli -g //安装gulp命令行
(4)、新建gulpfile.js文件 //这个是gulp的packge文件
(5)、var gulp = require("gulp") -g全局require不到 所以要 npm install gulp --save-dev gulp
3、gulp对象方法
gulp.task //创建一个任务 流水线
gulp.src //处理哪些东西 .js所有的js文件 !client/b.js 不要这个文件 client/bad.js文件src
gulp.dest //处理完导出
gulp.watch //检测到文件的改动 gulp.watch('js/*/.js'['cssnano','concat'],function(){})
4、常见gulp插件
gulp-htmlmin html压缩
gulp-cssnano css压缩
gulp-uglify js压缩
gulp-imagemin 图片压缩
gulp-concat 合并文件
gulp-rename 重命名
gulp-clean 清空文件夹
gulp-jshint js代码规范性检查
gulp-rev 添加版本号
gulp-rev-replace 版本号替换
gulp-useref 解析html资源定位
gulp-less 把less转换成css
gulp-autoprefixer 后编译
browser-sync 实时联调
5、基本用法:
var gulp = require("gulp") 或
imropt Gulp form ('gulp') //?没验证过
gulp.task('html',function(){
gulp.src("a/b/*.js") 获得a文件夹下的b文件夹里的所有.js文件
.pipe(jade()) 用require来的工具jade()做一件事
.pipe(minify()) 用require来的工具minify()做一件事
.pipe(gulp.dest("c/d")) 导出到c文件下的d文件夹里
})
gulp.task('default',['thml','css'],funciton(){}) []这里面是并行的 并不是串行
执行
gulp 执行默认default命令
gulp html 执行html命令
网友评论