详解前端构建工具gulpjs的使用介绍及技巧

npm install -g gulp

npm install gulp

npm install --save-dev gulp

var gulp = require('gulp');
gulp.task('default',function(){
 console.log('hello world');
});

├── gulpfile.js
 ├── node_modules
 │ └── gulp
 └── package.json

gulp.src(globs[, options])

//使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])

gulp.src([*.js,'!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js',*.js]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中

gulp.dest(path[,options])

var gulp = require('gulp');
gulp.src('script/jquery.js')
 .pipe(gulp.dest('dist/foo.js'));
//最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js

var gulp = reruire('gulp');
//有通配符开始出现的那部分路径为 **/*.js
gulp.src('script/**/*.js')
 .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/**/*.js
//如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js

gulp.src('script/avalon/avalon.js') //没有通配符出现的情况
 .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/avalon.js

//有通配符开始出现的那部分路径为 **/underscore.js
gulp.src('script/**/underscore.js')
 //假设匹配到的文件为script/util/underscore.js
 .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/util/underscore.js

gulp.src('script/*') //有通配符出现的那部分路径为 *
 //假设匹配到的文件为script/zepto.js 
 .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/zepto.js

gulp.src('app/src/**/*.css') //此时base的值为 app/src

gulp.src('app/src/**/*.css') //此时base的值为app/src,也就是说它的base路径为app/src
  //设该模式匹配到了文件 app/src/css/normal.css
 .pipe(gulp.dest('dist')) //用dist替换掉base路径，最终得到 dist/css/normal.css

gulp.src(script/lib/*.js) //没有配置base参数，此时默认的base路径为script/lib
 //假设匹配到的文件为script/lib/jquery.js
 .pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js

gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script
 //假设匹配到的文件为script/lib/jquery.js
 .pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js 

gulp.task(name[, deps], fn)

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务
 // Do something
});

//只要执行default任务，就相当于把one,two,three这三个任务执行了
gulp.task('default',['one','two','three']);

gulp.task('one',function(){
 //one是一个异步执行的任务
 setTimeout(function(){
 console.log('one is done')
 },5000);
});

//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行
gulp.task('two',['one'],function(){
 console.log('two is done');
});

gulp.task('one',function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成
 //one是一个异步执行的任务
 setTimeout(function(){
 console.log('one is done');
 cb(); //执行回调，表示这个异步任务已经完成
 },5000);
});

//这时two任务会在one任务中的异步操作完成后再执行
gulp.task('two',['one'],function(){
 console.log('two is done');
});

gulp.task('one',function(cb){
 var stream = gulp.src('client/**/*.js')
  .pipe(dosomething()) /https://img.qb5200.com/download-x/dosomething()中有某些异步操作
  .pipe(gulp.dest('build'));
 return stream;
});

gulp.task('two',['one'],function(){
 console.log('two is done');
});

var Q = require('q'); //一个著名的异步处理的库 https://github.com/kriskowal/q
gulp.task('one',function(cb){
 var deferred = Q.defer();
 // 做一些异步操作
 setTimeout(function() {
  deferred.resolve();
 }, 5000);
 return deferred.promise;
});

gulp.task('two',['one'],function(){
 console.log('two is done');
});

gulp.watch(glob[, opts], tasks)

gulp.task('uglify',function(){
 /https://img.qb5200.com/download-x/do something
});
gulp.task('reload',function(){
 /https://img.qb5200.com/download-x/do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch(glob[, opts, cb])

gulp.watch('js/**/*.js', function(event){
 console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变 
 console.log(event.path); //变化的文件的路径
}); 

npm install --save-dev gulp-load-plugins

var gulp = require('gulp'),
 //一些gulp插件,abcd这些命名只是用来举个例子
 a = require('gulp-a'), 
 b = require('gulp-b'),
 c = require('gulp-c'),
 d = require('gulp-d'),
 e = require('gulp-e'),
 f = require('gulp-f'),
 g = require('gulp-g'),
 //更多的插件...
 z = require('gulp-z'); 

{
 "devDependencies": {
 "gulp": "~3.6.0",
 "gulp-rename": "~1.2.0",
 "gulp-ruby-sass": "~0.4.3",
 "gulp-load-plugins": "~0.5.1"
 }
}

var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')();

plugins.rename = require('gulp-rename');
plugins.rubySass = require('gulp-ruby-sass');

npm install --save-dev gulp-rename

var gulp = require('gulp'),
 rename = require('gulp-rename'),
 uglify = require("gulp-uglify");
 
gulp.task('rename', function () {
 gulp.src('js/jquery.js')
 .pipe(uglify()) //压缩
 .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
 .pipe(gulp.dest('js'));
 //关于gulp-rename的更多强大的用法请参考https://www.npmjs.com/package/gulp-rename
});

npm install --save-dev gulp-uglify

var gulp = require('gulp'),
 uglify = require("gulp-uglify");
 
gulp.task('minify-js', function () {
 gulp.src('js/*.js') // 要压缩的js文件
 .pipe(uglify()) //使用uglify进行压缩,更多配置请参考：
 .pipe(gulp.dest('dist/js')); //压缩后的路径
});

npm install --save-dev gulp-minify-css

var gulp = require('gulp'),
 minifyCss = require("gulp-minify-css");
 
gulp.task('minify-css', function () {
 gulp.src('css/*.css') // 要压缩的css文件
 .pipe(minifyCss()) //压缩css
 .pipe(gulp.dest('dist/css'));
});

npm install --save-dev gulp-minify-html

var gulp = require('gulp'),
 minifyHtml = require("gulp-minify-html");
 
gulp.task('minify-html', function () {
 gulp.src('html/*.html') // 要压缩的html文件
 .pipe(minifyHtml()) //压缩
 .pipe(gulp.dest('dist/html'));
});

var gulp = require('gulp'),
 jshint = require("gulp-jshint");
 
gulp.task('jsLint', function () {
 gulp.src('js/*.js')
 .pipe(jshint())
 .pipe(jshint.reporter()); // 输出检查结果
});

npm install --save-dev gulp-concat

var gulp = require('gulp'),
 concat = require("gulp-concat");
 
gulp.task('concat', function () {
 gulp.src('js/*.js') //要合并的文件
 .pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"
 .pipe(gulp.dest('dist/js'));
});

npm install --save-dev gulp-less

var gulp = require('gulp'),
 less = require("gulp-less");
 
gulp.task('compile-less', function () {
 gulp.src('less/*.less')
 .pipe(less())
 .pipe(gulp.dest('dist/css'));
});

npm install --save-dev gulp-sass

var gulp = require('gulp'),
 sass = require("gulp-sass");
 
gulp.task('compile-sass', function () {
 gulp.src('sass/*.sass')
 .pipe(sass())
 .pipe(gulp.dest('dist/css'));
});

npm install --save-dev gulp-imagemin

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件

gulp.task('default', function () {
 return gulp.src('src/images/*')
  .pipe(imagemin({
   progressive: true,
   use: [pngquant()] //使用pngquant来压缩png图片
  }))
  .pipe(gulp.dest('dist'));
});

npm install --save-dev gulp-livereload

var gulp = require('gulp'),
 less = require('gulp-less'),
 livereload = require('gulp-livereload');

gulp.task('less', function() {
 gulp.src('less/*.less')
 .pipe(less())
 .pipe(gulp.dest('css'))
 .pipe(livereload());
});

gulp.task('watch', function() {
 livereload.listen(); //要在这里调用listen()方法
 gulp.watch('less/*.less', ['less']);
});