gulp插件
gulp只提供了4个实用的接口，但本身并不能做太多的事情，只能实现读取、写入文件以及监控文件等少部分功能。其他的实用功能都是依靠插件来进行扩展的。如下所示：
·编译sass :gulp-sass
·编译less：gulp-less
·合并文件：gulp-contat
·压缩js文件：gulp-uglify
·重命名js文件:gulp-rename
·优化图像文件：gulp-imagemin
·压缩css文件：gulp-minify-css
·创建本地服务器：gulp-connect
·实现实时预览:gulp-connect
<使用插件>
1，npm install xxx --save-dev 安装插
2，在gulpfile.js顶部引入此插件
3，在创建任务的时候使用此插件
<自动加载 gulp-load-plugins>
这个插件能自动帮你加载package.json文件里的gulp插件。假如项目依赖中使用了gulp-concat、gulp-connect、gulp-imagemin。那么我们可以在gulpfile.js中使用gulp-load-plugins来自动加载这三个插件。
var gulp = require("gulp")
var $ = require("gulp-load-plugins")();//加载该插件并马上运行它
/*当要使用gulp-concat和gulp-connect的时候，就可以使用
$.concat和$.connect来代替了。 省去了require的部分*/
<将less编译为css>
npm install gulp-less --save-dev
var gulp = require("gulp");
var less = require("gulp-less");
gulp.task("less",function(){
return gulp.src("app/less/*.less").pipe(less()).pipe(gulp.dest("dist/css"))
})
gulp.task("default",["less"])
<将sass编译为css>
npm install gulp-sass --save-dev sass是用ruby编写的，所以应该先安装ruby（www.w3cplus.com/sassguide/install.html）,再用ruby的包管理工具gem来安装sass
var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass",function(){
return gulp.src("app/sass/*.scss").pipe(sass()).pipe(gulp.dest("dist/css"))
})
gulp.task("default",["sass"])
<运行本地服务器>
有时候我们需要把文件放到本地服务器上去预览代码效果，gulp-connect可以帮我们创建一个本地服务器去运行我们的项目
npm install gulp-connect --save-dev 加上一个--save-dev,把这个插件放到开发依赖里面
·创建任务，在gulpfile.js中引入该插件
var gulp = require("gulp")
var connect = require("gulp-connect")
gulp.task("server",function(){
connect.server({
root:"dist",//服务器的根目录
port:8080//服务器的地址，没有此配置项默认也是8080
})
})
gulp.task("default",["server"])//运行此任务的时候会在8080上启动服务
当希望文件变化的时候浏览器可以自动刷新，这样就不需要文件修改后手动去刷新浏览器了，代码如下：
gulp.task("copy-html",function(){
gulp.src("app/index.html")//指定源文件
.pipe(gulp.dest("dist")) //拷贝到dist目录
.pipe(connect.reload());//通知浏览器重启
})
gulp.task("watch",function(){
gulp.watch("app/index.html",["copy-html"]);//当index.html变化时执行copy-html任务
})
gulp.task("server",function(){
connect.server({
root:"dist ,
port:8080,
livereload:true//启用实时刷新功能
})
})
gulp.task("default",["server","watch"])//运行此任务时，在8080启动服务器
<合并js文件>
使用gulp-concat把几个文件合并到一起
npm install gulp-concat --save-dev
var gulp = require("gulp");
var sass = require("gulp-concat");
gulp.task("concat",function(){
return gulp.src(["app/js/*.js","!app/js/*.tmp.js"])//指定要合并的文件glob
.pipe(concat("app.js"))//进行合并并指定合并后的文件名
.pipe(gulp.dest("dist/js")) //输出到目标路径
})
gulp.task("default",["concat"])
<压缩js>
合并文件后可以对js文件进行压缩，最小化处理
npm install gulp-uglify --save-dev
var gulp = require("gulp");
var sass = require("gulp-uglify");
gulp.task("uglify",function(){
return gulp.src(["app/js/*.js","!app/js/*.tmp.js"])//指定要合并的文件glob
.pipe(concat("app.js"))//进行合并并指定合并后的文件名
.pipe(uglify())//对合并后的app.js文件进行压缩
.pipe(gulp.dest("dist/js")) //输出到目标路径
})
gulp.task("default",["uglify"])
<压缩html>
gulp-minify-html插件用来压缩html文件
var gulp = require("gulp");
var sass = require("gulp-minify-html");
gulp.task("minify-html",function(){
return gulp.src("src/*.html")//指定要合并的html的glob
.pipe(minifyHtml())//压缩
.pipe(gulp.dest("dist/html")) //输出到目标路径
})
gulp.task("default",["minify-html"])
<重命名js>
var rename = require("gulp-rename");
gulp.task("uglify",function(){
return gulp.src(["app/js/*.js","!app/js/*.tmp.js"])//指定要合并的文件glob
.pipe(concat("app.js"))//进行合并并指定合并后的文件名
.pipe(gulp.dest("dist/js"))//将未压缩的文件保存一份
.pipe(uglify())//对合并后的app.js文件进行压缩
.pipe(rename("app.min.js"))//对此文件充命名
/*
当此处有多个文件的时候，可以传个参数
.pipe(rename(function(path){
//path.dirname
path.basename += ".min";
//path.extname = ".css"
}))
*/
.pipe(gulp.dest("dist/js")) //输出到目标路径
})
gulp.task("default",["uglify"])
<压缩图片>
在保证不改变图片质量的情况下，让图像文件的体积变得更小一点。可以使用gulp-imagemin，使用的API有所改变
npm install gulp-imagemin --save-dev
var imagemin = require("gulp-imagemin");
gulp.task("copy-images",function(){
return gulp.src("app/imgs/*.{jpg,png}")//指定要压缩的图片
.pipe(imagemin())//进行图片压缩
.pipe(gulp.dest("dist"))//输出目的地
})
gulp.task("default",["copy-images"])
<js代码检查>
可以用gulp-jshint进行js代码检查
npm install gulp-jshint --save-dev
var jshint = require("gulp-jshint");
gulp.task("jsLint",function(){
gulp.src("src/*.js")
.pipe(jshint)//进行代码检查
.pipe(jshint.reporter())//输出检查结果
})
《认识Yeoman》
<什么是yeoman>
yeoman帮助我们创建项目，提供更好的工具来使我们的项目更多样化。yeoman提供generator系统，一个generator是一个插件，在我们的项目上使用“yo”命令时，会运行该generator。通过这些官方的generators，推出了yeoman工作流，工作流是一个健壮的、有自己特色的客户端堆栈，包含能快速构建漂亮的网络应用的工具和框架。yeoman提供了负责开始项目开发的一切，没有任何让人头痛的手动配置。
采用模块化结构，yeoman利用从几个开源社区网站学习到的经验，确保智能的进行开发。基于良好的文档基础以及深思熟虑的项目构建过程，yeoman提供测试和其他更多技术，所以开发人员可以更专注于解决方案。
yeoman提供了三个工具：脚手架(yo)、构建工具（grunt）、包管理器（brower）。这三个工具是分别独立开发的，但是需要配合使用，来实现我们更高效的工作流模式。
<安装yeoman>
·安装yeoman
npm install -g yo
·通过http://yeoman.io找到一个官方生成器gulp-webapp
npm install -g generator-gulp-webapp
·生成一个项目
yo gulp-webapp gulpDemo
生成react脚手架
首先确保自己安装了nodejs，然后全局安装yeoman npm install -g yo 然后直接安装脚手架 npm install -g generator-reactpackage，在合适的地方新建一个文件夹，在文件夹下运行： yo reactpackage
然后使用以下命令：
npm run dev //项目开发过程使用，启动服务，实时刷新
npm run build //开发完成之后打包文件（js、css分开打包
