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