gulp使用日记
in 前端 with 0 comment

gulp使用日记

in 前端 with 0 comment

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

由于gulp被钦定了,于是开始鼓捣起了gulp。(我可没涉及恶毒的zz隐喻,你们这么想要负责任的!)

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

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

安装nodejs

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

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

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

安装gulp

首先全局安装gulp

在命令行中输入

npm install -g gulp

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

//执行这行之前,先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里完成。

首先我们输入以下内容

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

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

插件安装

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

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

npm install 插件名 --save-dev

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

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 拷贝文件夹到某处

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找到了解决办法

// 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)
Comments are closed.