列舉幾個(gè)常用案例：
var gulp = require('gulp'); //加載gulp模塊
var less = require('gulp-less');//轉(zhuǎn)譯less
var uglifyJs = require('gulp-uglify');? //加載uglify模塊? 壓縮js
var cleanCss = require('gulp-clean-css');? //加載clean模塊? 壓縮css
var sass=require('gulp-sass');//轉(zhuǎn)譯scss
var htmlmin=require('gulp-htmlmin');//壓縮html
var rename=require('gulp-rename');//重命名
var concat=require('gulp-concat');//合并
//定義一個(gè)壓縮js代碼的任務(wù)
gulp.task('uglifyJs', [], function() {
? ? gulp.src('js/*.js')? //找到原始文件
? ? ? ? .pipe(uglifyJs())? ? //壓縮js代碼
? ? ? ? .pipe(gulp.dest('js/src'));? //壓縮后的代碼儲(chǔ)存在這里
});
//定義一個(gè)less自動(dòng)生成css任務(wù)
gulp.task('testLess', function () {
? ? gulp.src('less/*.less') //該任務(wù)針對(duì)的文件
? ? ? ? .pipe(less()) //該任務(wù)調(diào)用的模塊
? ? ? ? .pipe(gulp.dest('less/css')); //將會(huì)在src/css下生成index.css
});
// //定義一個(gè)壓縮css代碼的任務(wù)
gulp.task('cleanCss', [], function() {
? ? gulp.src('css/*.css')? //找到原始文件
? ? ? ? .pipe(cleanCss())? ? //壓縮css代碼
? ? ? ? .pipe(gulp.dest('css/src'));? //壓縮后的代碼儲(chǔ)存在這里
});
//定義一個(gè)sass自動(dòng)生成css的任務(wù)
gulp.task('sass', [], function() {
? ? gulp.src('sass/*.scss')? //找到原始文件
? ? ? ? .pipe(sass().on('error', sass.logError))? ? //該任務(wù)調(diào)用的模塊
? ? ? ? .pipe(gulp.dest('sass/src'));? //將會(huì)在sass/src下生成index.css
});
//定義一個(gè)壓縮html代碼的任務(wù)
gulp.task('htmlmin', [], function() {
? ? gulp.src('html/*.html')? //找到原始文件
? ? ? ? .pipe(htmlmin())? ? //壓縮html代碼
? ? ? ? .pipe(gulp.dest('html/src'));? //壓縮后的代碼儲(chǔ)存在這里
});
//定義一個(gè)合并任務(wù)
gulp.task('concat', [], function() {
? ? gulp.src('js/src/*.js')? //找到原始文件
? ? ? ? .pipe(concat('concat.js'))? ? //壓縮html代碼
? ? ? ? .pipe(gulp.dest('js/src'));? //壓縮后的代碼儲(chǔ)存在這里
});
//定義一個(gè)重命名任務(wù)
gulp.task('rename', [], function() {
? ? gulp.src('js/src/concat.js')? //找到原始文件
? ? ? ? .pipe(rename('concat.min.js'))? ? //壓縮html代碼
? ? ? ? .pipe(gulp.dest('js/src'));? //壓縮后的代碼儲(chǔ)存在這里
});
// //定義一個(gè)監(jiān)聽(tīng)任務(wù)
gulp.task('watch', function() {
? ? //監(jiān)聽(tīng)文件，一旦文件有變化，就執(zhí)行相應(yīng)的任務(wù)
? ? gulp.watch('less/*.less', ['testLess']);
? ? gulp.watch('js/*.js', ['uglifyJs']);
? ? gulp.watch('css/*.css', ['cleanCss']);
? ? gulp.watch('sass/*.sass', ['sass']);
? ? gulp.watch('html/*.html', ['htmlmin']);
? ? gulp.watch('js/src/*.js', ['concat']);
? ? gulp.watch('js/src/concat.js', ['rename']);
});
// //默認(rèn)執(zhí)行的任務(wù), 執(zhí)行完數(shù)組中的任務(wù)之后轴猎，再執(zhí)行當(dāng)前任務(wù)
gulp.task('default', ['testLess','uglifyJs','cleanCss','sass','htmlmin','concat','rename'], function() {
? ? console.log('執(zhí)行完畢');
});
