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分开打包