幾天前搭了個小型的gulp自動化腳手架，運用到實際項目中發現還有一些小問題，今天來統一修復一下。

文章鏈接 基于gulp的前端腳手架(一)

存在的問題

雪碧圖相關

1、使用2倍圖后，若2倍圖尺寸不是1倍圖的2倍，如2x: 37*12, 1x: 19*6。
會出現錯誤：

2、使用gulp.spritesmith-multi生成雪碧圖時會產生1x.png和2x.png兩個文件。
很多時候我們的項目是不需要使用到1x圖的，這樣會造成資源的浪費。所以1x.png不應該出現在dist/img目錄中

其他

暫沒發現其他問題哈哈哈

如何修復

修改圖片尺寸為偶數

找了一下午也沒有什么比較好的解決辦法啊，摔桌 (╯‵□′)╯︵┻━┻ 手動修改圖片尺寸太麻煩了

google了一下 發現一般是新增一個圖片處理的插件解決。我使用的是gulp-gm，但是它必須依賴于GraphicsMagick或者ImageMagick這兩個圖片處理引擎

Make sure GraphicsMagick or ImageMagick is installed on your system and properly set up in your PATH.——npmjs gulp-gm

我安裝的是ImageMagick

Mac下直接使用brew安裝

brew install imagemagick

無奈實習生用的是win7 QAQ
可以到這里ImageMagick 選擇適合自己電腦的版本安裝

使用GUI安裝時，這一步很重要

一定要勾選黃色那行，不然convert-version跑不起，就會報錯了。而且這錯誤我排查了一天...捂臉
因為使用了imagemagick，所以要在gulpfiles gm task中將imagemagick的選項設為true

Just Like the following codes

gulp.src('test.png').pipe(gm(function (gmfile) {return gmfile.resize(100, 100);}, {// 這個是關鍵imageMagick: true})).pipe(gulp.dest('dist'));

再啰嗦地提一句，其實這些插件的使用方法，api都可以在npmjs上找到~ 只要你看得懂一點點的英文

好了，我們需要把尺寸為奇數的x2圖修改成偶數
把gulpfiles的代碼改成

gulp.task('resizeImg', function resizeImages () {return gulp.src('src/sprite/**/*@2x.png').pipe(gm(function (gmfile, done) {gmfile.size(function (err, size) {if(size.width%2!==0||size.height%2!==0) {done(null, gmfile.resize(size.width + size.width%2,size.height + size.height%2));}});},{imageMagick: true})).pipe(gulp.dest('src/sprite/')); });

試跑一下...緊張.jpeg

果然沒成功 QAQ 發現是那個if出問題，把它去掉就好了

gulp.task('resizeImg', function resizeImages () {return gulp.src('src/sprite/**/*@2x.png').pipe(gm(function (gmfile, done) {gmfile.size(function (err, size) {var wid = size.width + size.width%2,hei = size.height + size.height%2;// resize(width,[height],"!") 嘆號表示強制按指定大小縮放done(null, gmfile.resize(wid, hei, "!"));});},{imageMagick: true})).pipe(gulp.dest('src/sprite/')); });

看一眼我們生成的圖片，嗯，尺寸都變成偶數了...
表示血槽已空 (:з」∠) 插件什么的真是太難玩了

然后我們得讓gulp跑sprite命令時先跑一下resizeImg 修改一下代碼

gulp.task('sprite', ['resizeImg'], function (...) })

DONE!

清除不必要文件

這里用gulp-clean就好。

//======================= // 清除不必要文件 //=======================gulp.task('clean', function() {gulp.src('dist/img/*@2x.png').on('data',function(file){// 這里我做了一個判斷，在沒有2x圖的情況下，不需要清除1x圖var cFile = file.history[0].substring(file.history[0].lastIndexOf("\\")+1,file.history[0].lastIndexOf("@2x"));if(cFile) {return gulp.src('dist/img/'+cFile+'.png', {read: false}).pipe(clean());}}); })

最后修改一下watch的代碼

gulp.watch("src/sprite/**/*.png", ['sprite','clean']);

Finished~

愉快地玩耍

package.json和gulpfiles.js都上傳到github上了,大家可以直接clone下來

$ npm install

后就可以跑各種命令啦~

總結

以上是生活随笔為你收集整理的基于gulp的前端脚手架（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。