gulp初体验

1、下载nodejs

2、使用npm在全局环境安装gulp

npm install -g gulp
全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：
npm install gulp

3、使用webstorm创建一个项目(可以是一个空的文件夹),在settings里面输入node找到Node.js and NPM在Node interpreter里面选择你的node安装目录的node.exe,点击ok。

4、在项目文件夹根目录下新建一个js文件gulpfile.js，内容如下：

/**
 * Created by Administrator on 2016/8/21.
 */
var gulp=require("gulp");
var uglify=require("gulp-uglify");//js文件压缩
var minifycss=require("gulp-minify-css");//css文件压缩
var minifyhtml=require("gulp-minify-html");//html文件压缩
var concat=require("gulp-concat");//文件合并
var less=require("gulp-less");//编译less
//var sass=require("gulp-sass");//编译sass(目前暂时用不到)
var rename=require("gulp-rename");//重命名
var jshint=require("gulp-jshint");//语法检查
/*var imagemin=require("gulp-imagemin");//图片压缩*/
var livereload=require("gulp-livereload");//自动刷新（需安装谷歌的livereload chrome extension插件(http://www.cnplugins.com/devtool/livereload/download.html)）
//编译less
gulp.task('compile-less', function () {
    gulp.src('less/*.less')
        .pipe(less())
        .pipe(gulp.dest('css')) //输出到css目录
        .pipe(livereload());//刷新css
});
//合并文件
gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
        .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
        .pipe(gulp.dest('build'))
        .pipe(uglify()) //执行压缩
        .pipe(rename('all.min.js')) //重命名
        .pipe(gulp.dest('build')); //在build目录输出压缩版
});
//js代码检查
gulp.task('jshint', function () {
    gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter()); // 输出检查结果
});
//html代码压缩
gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
        .pipe(minifyhtml()) //压缩
        .pipe(gulp.dest('html'))
        .pipe(livereload());
});
//css代码压缩
gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
        .pipe(minifycss()) //压缩css
        .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
    livereload.listen(); //要在这里调用listen()方法
    gulp.watch(['less/*.less','html/*.html'], ['compile-less','minify-html']);//监听less文件和html文件的变化，发生变化后，执行后面的任务
});
gulp.task('default', ['jshint', 'watch']);
//将根目录里面所有文件夹里面的js文件，压缩合并后，每一个文件夹里面的所有js合并后生成一个压缩版文件和未压缩版文件
var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var scriptsPath = 'src/scripts';
function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

gulp.task('scripts', function() {
    var folders = getFolders(scriptsPath);

    var tasks = folders.map(function(folder) {
        // 拼接成 foldername.js
        // 写入输出
        // 压缩
        // 重命名为 folder.min.js
        // 再一次写入输出
        return gulp.src(path.join(scriptsPath, folder, '/*.js'))
            .pipe(concat(folder + '.js'))
            .pipe(gulp.dest(scriptsPath))
            .pipe(uglify())
            .pipe(rename(folder + '.min.js'))
            .pipe(gulp.dest(scriptsPath));
    });
    return merge(tasks);
});
var react=require('gulp-react');//jsx转换
var babel=require('gulp-babel');//将es6代码转换为es5版本
gulp.task('translate',function(){
    return gulp.src('./src/myui.js')
        .pipe(react())
        .pipe(babel({
            presets: ['babel-preset-es2015']
        }))
        .pipe(gulp.dest('./dest'))
});

5、gulp常用api说明：

5.1、gulp.src(globs,options);//options为可选参数，一般用不到

读取globs目录下的文件

globs是一个文件匹配模式，类似正则表达式(详情可以参考：http://www.cnblogs.com/2050/p/4198792.html)

5.2、gulp.dest(path,options)

将流文件(nodejs中的stream)写入path路径

5.3、gulp.task(name,tasksArray,fn)

定义一个任务，name为任务名，tasks是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕之后执行。如没有依赖，可省略。

fn为任务函数，把任务要执行的代码都写在这里。该参数也是可选

5.4、gulp.watch(glob,options,tasks)

glob为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同

tasks为文件变化后要执行的任务，为一个数组

6、关于nodejs的pipe()方法

readable.pipe(destination[, options])

pipe方法将一个写入流附加到readable里了，这个写入流会自动转换流模式(只读流，写入流)，然后把这个流里面的数据写入到destination里面。