gulp 代码检查、文件压缩、合并和重命名、编译less和监听

	**代码检查(检查语法错误)**

		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()
})

你可能感兴趣的:(gulp)