gulp的使用方法
1 全局安装gulp(首先要进入当前所在的目录下下载)
npm install gulp -g
2 然后局部安装gulp(在当前所在的目录下下载)
npm install gulp --save-dev
3 注册任务
gulp.task('任务名',function(){
//配置任务的操作
})
在该路径下的终端中可以执行gulp 任务名
4 注册默认任务
gulp.task('default',['任务名'])
5 使用gulp的插件
1 gulp-concat:合并文件(js/css)
2 gulp-uglify:压缩文件
3 gulp-rename:重命名文件
4 gulp-clean-css:压缩css
5 gulp-livereload:实时自动编译刷新
6 重要的API
1 gulp.src(filePath/PathArr)
指向指定路径的文件,返回文件流对象
用于读取文件
2 gulp.dest(dirPath/pathArr)
指向指定的所有文件夹
用于向文件夹中输出文件
gulp的实际使用案例
1 下载完gulp后下载相关的插件
1 下载插件
npm install gulp-concat gulp-uglify gulp-rename --save-dev
2 在packfile.s文件中配置编码
var concat = require("gulp-concat")
var uglify = require(“gulp-uglify”)
var rename = require("gulp-rename")
2 注册合并压缩js文件
gulp.task("js",function(){
return gulp.src("src/js/*.js") //找到目标源文件,将数据读取到gulp中
.pipe(concat("build.js")) //将目录下的js文件都临时保存到build,js中
.pipe(gulp.dest("dist/js/"))//将上面的临时文件放入指定目录下
.pipe(uglify()) //压缩该文件
.pipe(rename({suffix:".min"})) //将压缩后为文件重命名加上一个后缀.min
.pipe(gulp.dest("dist/js/")) 将压缩并重名后的文件保存到指定的目录下
})
3 注册转换less的任务
1 npm install gulp-less gulp-clean-css --save-dev
2 配置编码
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
3 注册转换less的任务
gulp.task("less",function(){
return gulp.src("src/less/*.js") //查找目标文件
.pipe(less()) //编译less文件为css文件
.pipe(gulp.dest("src/css/")) 将编译后的文件保存到指定路径下
})
4 压缩html任务
1 下载插件
npm install gup-htmlmin --save-dev
2 配置编码
var htmlmain = require("gulp-htmlmain");
3 压缩html任务
gulp.task("html",function(){
return gulp.src("index.html")
.pipe(htmlMin({collapseWhitespace:true}))
.pipe(gulp.dest("dist"))
})
5 压缩合并css文件
gulp.task("css",["less"],function(){
return gulp.src("src/css/*.css")
.pipe(concat("build.css"))
.pipe(rename("suffix:min"))
.pipe(cssClean({compatibility:"ie8"}))
})