Gulp

简介

常用方法

常用插件

gulp

流构建系统
官网
官方教程

npm install gulp

gulp-sourcemaps

官网
让gulp.js 支持source maps, 处理JS时，生成SourceMap

source map

Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便
讲解链接

npm install gulp-sourcemaps

使用情景

browser-sync

官网
静态文件服务器，同时也支持浏览器自动刷新

npm install -g browser-sync

del

官网
用匹配替换, 删除文件/文件夹, 同时它也能保护工作目录不被删除

npm install --save del

gulp-uglify

官网
通过UglifyJS来压缩JS文件

npm install --save-dev gulp-uglify

gulp-less

官网
gulp的一个less插件, 将less预处理为css

npm install gulp-less

gulp-sass

官网
gulp的一个sass插件, sass 是一个CSS 预处理器,将sass预处理为css

npm install gulp-sass --save-dev

gulp-minify-css

官网
用clean-css压缩css

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

gulp-minify-html

官网
用minimize压缩html

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

var gulp = require('gulp');
var minifyHTML = require('gulp-minify-html');

gulp.task('minify-html', function() {
  return gulp.src('src/*.html')
    .pipe(minifyHTML({ empty: true }))
    .pipe(gulp.dest('dist'));
});

gulp-concat

官网

npm install gulp-concat

gulp-inject

官网
把js , css and web组件的引用, 注入到index.html中, 替换html文本中的占位符.
默认的转换符和占位符已经存在, 用来注入文件到html, jade, jsx , less, slm, haml and sass / scss 文件中

npm install gulp-inject

gulp-load-plugins

官网
加载所有的gulp插件, 并把他们附加到全局范围或是你选择的一个对象上

npm install --save-dev gulp-load-plugins

gulp-eslint

官网
一个gulp 插件, 用ESLint 处理文件

npm install gulp-eslint

gulp-wiredep

官网
自动把Bower的组件注入到HTML文件中

npm install gulp-wiredep

option中的参数

devDependencies： 注入开发版中的依赖组件;
dependencies: 注入依赖组件；
directory: 存放bower包的目录，这个目录是’.bowerrc’文件中的.directory

#

官网

这里写代码片