**代码检查(检查语法错误)**
1、安装
cnpm -D install gulp-jshint jshint
(2)在gulpfile.js文件中引入
var jshint自定义名=require("gulp-jshint")
(3)创建任务
gulp.task('自定义任务名',function(cb)
{
gulp.src("要检查的文件的路径")
.pipe(jshint自定义压缩插件名())
.pipe(jshint自定义压缩插件名.reporter())
cb();
})
压缩打包多个html文件,参考压缩js路径设置
(4)执行
gulp 自定义任务名
**压缩多个文件并合并、重命名**
1、安装
cnpm -D install gulp-concat gulp-rename
(2)在gulpfile.js文件中引入
var concat自定义名=require("gulp-concat")
var rename自定义名=require("gulp-rename")
(3)创建任务
gulp.task("reconcat",function(cb){
//要合并的文件路径
gulp.src("./src/js/*.js")
.pipe(concat自定义名("重命名名字"))
.pipe(rename自定义名({
suffix:".min"
}))
.pipe(js自定义压缩名())
.pipe(gulp.dest("./dist/js"))
cb();
})
压缩打包多个html文件,参考压缩js路径设置
(4)执行
gulp 自定义任务名
**将less文件编译成css文件**
1、安装
cnpm install -D gulp-less
(2)在gulpfile.js文件中引入
var Less = require("gulp-less");
(3)创建任务
gulp.task("reLess",function(cb){
gulp.src("src/css/*.less")
.pipe(Less())
.pipe(gulp.dest("dist/css"))
cb();
})
压缩打包多个html文件,参考压缩js路径设置
(4)执行
gulp 自定义任务名
**设置监听(文件被修改时执行)**
gulp.task("自定义任务名",function(cb){
gulp.watch("监听文件路径",function(){
gulp.run(任务名); //文件发生修改时,重新运行该任务
})
cb()
})
执行监听
gupl 自定义任务名
代码示例:
var gulp = require('gulp');
var yasuo=require("gulp-uglify")
var cssUglify=require("gulp-minify-css")
var htmlts=require("gulp-minify-html")
var imgts=require("gulp-imagemin")
var jshint=require("gulp-jshint")
var concat=require("gulp-concat")
var rename=require("gulp-rename")
var reLess = require("gulp-less");
//代码检查
gulp.task("check",function(cb){
gulp.src("./src/js/demo.js")
.pipe(jshint())
.pipe(jshint.reporter())
cb();
})
//合并、重命名和压缩
gulp.task("reconcat",function(cb){
gulp.src("./src/js/*.js")
.pipe(concat("app.js"))
.pipe(rename({
suffix:".min"
}))
.pipe(gulp.dest("./dist/js"))
.pipe(yasuo())
.pipe(gulp.dest("./dist/js"))
cb();
})
//编译less文件
gulp.task("reLess",function(cb){
gulp.src("src/css/*.less")
.pipe(reLess())
.pipe(gulp.dest("dist/css"))
cb();
})
//监听less的改变
gulp.task("wcless",function(cb){
gulp.watch("src/css/test.less",function(){
gulp.run("reless");
})
cb()
})
//压缩默认任务(即gulp直接执行)
gulp.task('default', function(cb)
{
gulp.start(["yasuotest","cssys","htmlys"])
cb()
})