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)）//编译lessgulp.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里面。