gulp使用日记

因为新项目需要使用gulp、webpack之类的前端自动化打包工具，今天也是前端自动化打包工具的第一天。

由于gulp被钦定了，于是开始鼓捣起了gulp。

说实话一个前端菜逼，连js还没什么规范。突然说起es6、前端自动化什么的，还是有点懵的。

那么开始吧，总要走出这一步的、

安装nodejs

因为gulp基于nodejs，所以我们需要先给电脑装上nodejs。选完自己对应的版本然后安装。

下载地址：http://nodejs.cn/download/

安装完成后，cmd进入命令行，输入 node -v如果出现了版本号则为安装成功。

安装gulp

首先全局安装gulp

在命令行中输入

1

npm install -g gulp

在项目目录中安装一次gulp（把目录切换到你的项目文件夹）

1
2

# 执行这行之前，先cd到项目目录里！！！
npm install --save-dev gulp

为什么要安装2次gulp参考以下来自stackoverflow的回复（大概是为了版本的灵活性）
why-do-we-need-to-install-gulp-globally-and-locally
what-is-the-point-of-double-install-in-gulp

建立gulpfile.js

gulpfile.js可以理解为以前在MS-DOS上玩的bat批处理文件命令，gulp会运行gulpfile.js来执行前端项目打包的工作，所有的css js压缩，图片处理都在这个js里完成。

首先我们输入以下内容

1
2
3
4

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

然后在命令行中（命令行的目录需为当前项目的目录）输入gulp,gulp就会实现自动打包啦。

插件安装

我们可以在npm或者gulpjs上寻找gulp的插件然后npm安装使用。
gulpjs plugins地址：https://gulpjs.com/plugins/

然后在项目里执行以下命令安装

1

npm install 插件名 --save-dev

安装成功之后在gulpfile.js引用对应的插件 比如我们引用一个css压缩插件

1
2
3
4
5
6
7
8
9
10
11
12

var gulp = require('gulp');
    cleanCSS = require('gulp-clean-css'); //require插件

gulp.task('gulp-clean-css',function(){ //这里是这个插件执行的内容
    return gulp.src('src/*.css')
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist'));
});

gulp.task('default',['gulp-clean-css'],function(){ //记得把这个任务加到default里，不然任务似乎不会执行
    console.log('it is ok.');
});

运行以上代码，就会把 src 目录下的css自动压缩然后输出到dist目录里。

四个API函数

gulp存在四个API函数，分别是task(),src(),dest(),watch()。
这四个的中文文档的地址：gulp API 文档

看了会这个页面 我：卧槽，什么东西？告辞。

推荐看这篇的第三部分的API介绍，简介明了 前端构建工具gulpjs的使用介绍及技巧

第二天 思考

经过昨天懵懵懂懂的尝试之后，终于把gulp跑起来了。

这时候终于缓过神来，对这样瞎折腾感到好笑。于是开始想：我使用gulp的是为了做什么又或者说是为了解决什么问题呢？

一时凝噎，想了想之前开会说 使用gulp一是为了解放劳动力，自动对css、js、图片进行压缩，合并，打包。然后自动更新资源的引用关系。这样可以解决微信端发布时客户端的缓存问题。

想通了这点，看gulp的API文档一点点学着写脚本就不需要了，直接搜索“gulp 微信端缓存”就能找到不少脚本，安装对应的拓展，把脚本拷进gulpfile.js里即可。

gulp之静态资源防缓存处理：阅读原文

有意思的是，当我使用 gulp-rev-collector 插件修改文件的引用关系时，出了BUG。无论我怎么执行脚本，直接gulp或者gulp 单个任务执行 都无法修改html文件的引用关系。期间找到的最有可能的问答如下：

gulp-rev-collector有个bug

但很遗憾，我并不属于上面那个问题。

后来无意之中，当我发现执行2次gulp时，引用关系就会被正确的修改？？？

可能是gulp执行的default任务虽然是连续但是是异步执行的，导致在执行rev时所需要的*.json文件未生成完，系统没办法执行替换吧？

不过手上的事比较多，没时间深入研究。先占一个坑位吧

gulp-rev-collector使用注意

如果需要自动修改引用，则css js的引用地址必须为绝对路径，相对路径无法转换。
如果一次执行发现未转换，再执行一次gulp即可。

gulp 拷贝文件夹到某处

1
2
3
4
5
6

gulp.task('moveImages',function() {
    //遍历拷贝 xx/imgages 目录
    //src/**/images/* 则是拷贝imgages目录下的文件
    gulp.src(['src/**/images','src/**/images/*'])     
        .pipe(gulp.dest('dist'));               
});

gulp-clean-css 自动变更了url引用

gulp-clean-css会自动修改background,background-image等css属性的url()引用地址。

这个问题初步排查下来就是clean-css引起的，因为直接.pipe拷贝文件过去是不会做任何操作的。

同时根据百度找到的解决方法去尝试，改了大半天发现并没有什么软用。

这时候我看了下gayhub的版本号，clean-css的版本号为4.1，然后查看了我本地的clean-css是3.5.4。

我tm…，用v4版本的解决办法去搞v3版本，这时候查看了本地clean-css的README.md找到了解决办法

1
2
3
4
5
6
7
8
9
10

// 3.x版本的README.md中有一行注释
// `rebase` - set to false to skip URL rebasing
// 所以只需要在gulp-clean-css中加上一个配置项{rebase:false}，在压缩css时就不会自动修改url引用
.pipe(cleanCSS({rebase:false}))   

// 4.x版本有2个解决方法

// 1. 通过rebaseTo设置定位目录
// 2. 在level2中有一个属性 skipProperties，把background,background-image加入其中即可
// skipProperties: [] // controls which properties won't be optimized, defaults to `[]` which means all will be optimized (since 4.1.0)