gulp使用

http://www.cnblogs.com/chenchenghua/p/5953767.html

Gulp入门

使用前确认安装node.

以下操作都在cmd中进行

1. 命令行输入  npm install gulp -g  全局安装gulp 

2. 进入到项目根目录下边 输入npm init  可以回车

3.  输入npm install gulp --save-dev 确保根目录下有package.json文件

4. 安装Gulp插件 输入 npm install gulp-clean gulp-concat gulp-autoprefixer gulp-imagemin gulp-minify-css gulp-replace gulp-rev gulp-rev-collector gulp-rev-format gulp-uglify gulp-cache  --save-dev

加载插件    具体需要哪些插件可以自行查找

5. 在项目的根目录下跟package.json同级下创建一个gulpfile.js (文件名称不能变)文件  这个文件就是需要执行任务的文件

Gulp中常用API

gulp.tesk() 主要是定义需要执行的任务

gulp.src ()  主要是在项目中查找匹配相关的文件

gulp.dest()  重新输出

gulp.watch() 监听事件

Gulpfile.js文件  定义任务

首先引入需要的插件

1.给css添加版本号

gulp.task(任务名称，执行前的事件，执行的函数) 

gulp.src (文件的路径)

.pipe(需要执行的内容)

例如

gulp.dest(文件输入的路径)

2. 给img添加版本号

命令行：gulp img

3. 将html中的css,img的名称替换掉

命令行：gulp revUrl

4. 监听事件跟默认事件

监听的时候只要文件有更改就会执行定义的任务gulp.watch(文件的路径，执行的方法)

命令行：gulp watch

默认事件则是定义初始执行的时候需要执行哪些事件gulp.task(‘default’,执行的方法)

命令行：gulp

基本的命令就是 gulp + 任务名称   

在执行任务前根据需要 清空文件  

注 想要让版本号变成?V=XXXX   类似的需要修改一下三个文件

1.打开node_modules\gulp-rev\index.js，  135行注释   136行添加 manifest[originalFile] = originalFile + '?v=' + file.revHash;

2.打开node_modules\gulp-rev-collector\index.js 将36-47行注释  在48行添加if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

                 isRev = 0;

                }

3.打开
nodemodules\gulp-rev\nodemodules\rev-path\index.js     17行改成
return modifyFilename(pth, (filename, ext) =>  filename + ext );