glup工具使用

参考： http://www.jianshu.com/p/3f2e13442555

https://segmentfault.com/a/1190000005170434

gulp API： http://www.gulpjs.com.cn/docs/api/

1、全局安装gulp：

npm install gulp -g

gulp -v 测试安装是否成功

2、配置项目： 创一个gulp文件夹作为项目根目录，项目结构如下：

配置package.json文件，有三种方法：  

可以用记事本之类的创建一个 

用npm init建 

也可以复制之前项目的创建好的package.json 

用npm init 的方法来创建package.json 在终端将当前目录切换至项目所在目录（gulp），然后输入npm init，一路回车，最终在项目根目录下生成package.json:

{

   "name": "gulp_test", /*项目名,切记这里命名不要与模块一样，如命名为gulp，要地安装gulp时就会出错*/

  "version": "1.0.0", /*版本号*/

  "description": "", /*描述*/

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "", /*作者*/

  "license": "ISC" /*项目许可协议*/

}

3、本地安装gulp：

npm install gulp --save-dev

--svae-dev 的作用就是将刚才安装的模块写入package.json中

全局安装，为的是能在端终运行gulp任务的，本地安装是项目级别的安装，将真正的gulp模块安装到项目的node_modules/下了，后面的插件都是依赖gulp模块的

4、本地安装gulp插件：

主要插件： 编译Sass ( gulp-ruby-sass )； Autoprefixer ( gulp-autoprefixer )； 缩小化(minify)CSS ( gulp-minify-css )； JSHint ( gulp-jshint )； 拼接 ( gulp-concat )； 丑化(Uglify) ( gulp-uglify )； 图片压缩 ( gulp-imagemin )； 即时重整(LiveReload) ( gulp-livereload )； 清理档案 ( gulp-clean )； 图片快取，只有更改过得图片会进行压缩 ( gulp-cache )； 更动通知 ( gulp-notify )

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

5、 在项目根目录下创建gulpfile.js文件

附录：gulp插件：

无依赖的

• del: Delete files/folders using globs.
• opn: A better node-open. Opens stuff like websites, files, executables. Cross-platform.
• psi: PageSpeed Insights for Node.
• wiredep: Wire Bower dependencies to your source code.
• browser-sync: Live CSS Reload & Browser Syncing.
• require-dir: Helper to require() directories.
• run-sequence: Run a series of dependent gulp tasks in order.

gulp辅助

• gulp: The streaming build system.
• gulp-if: Conditionally run a task.
• gulp-cache: A cache proxy task for Gulp.
• gulp-changed: Only pass through changed files.
• gulp-filter: Filter files in a vinyl stream.
• gulp-replace: A string replace plugin for gulp.
• gulp-flatten: remove or replace relative path for files.
• gulp-useref: Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
• gulp-load-plugins: Automatically load any gulp plugins in your package.json.

gulp plugins for css

• gulp-autoprefixer: gulp-autoprefixer.
• gulp-uncss: Remove unused CSS selectors.
• gulp-csso: Minify CSS with CSSO.
• gulp-less: Less for Gulp.

gulp plugins for scripts

• gulp-jshint: JSHint plugin for gulp.
• jshint-stylish: Stylish reporter for JSHint.

gulp plugins for compress

• gulp-concat: Concatenates files.
• gulp-imagemin: Minify PNG, JPEG, GIF and SVG images.
• gulp-minify-html: Minify html with minimize.
• gulp-minify-css: Minify css with clean-css.
• gulp-uglify: Minify files with UglifyJS.
• gulp-size: Display the size of your project.

测试相关

• karma 自动测试插件
• karma-Chrome-launcher: 调用Chrome进行测试

待选

• gulp-livereload
• gulp-autowatch