gulp程式碼壓縮和製作雪碧圖
阿新 • • 發佈:2019-02-18
安裝nodejs
- gulp是基於nodejs,需要安裝nodejs
檢視nodejs版本
- 安裝完nodejs後,在命令列中(window + r 輸入cmd回車)輸入node -v檢視安裝的nodejs版本,出現版本號,說明剛剛已正確安裝nodejs。
- cd定位到專案目錄,用法:cd + 路徑 ;也可以直接在專案檔案位址列中輸入cmd,回車;如圖
npm介紹
- 在命令列中輸入npm -v檢視npm的版本號,npm用於node外掛管理(安裝、解除安裝、管理依賴等),它是在安裝nodejs時一同安裝的。
- 在cmd控制檯中:
安裝外掛:npm insatll ‘外掛名稱’ -g--
解除安裝外掛:npm uninstall ‘外掛名稱’ -g--
save-dev
刪除全部外掛:藉助rimraf:npm install rimraf -g 用法:rimraf node_modules
更新外掛:npm update ‘外掛名稱’ -g--
save-dev
更新全部外掛:npm update--
save-dev
檢視已安裝目錄:npm list
安裝淘寶的cnpm
- 因為npm安裝外掛是從國外伺服器下載,受網路影響大,可能出現異常;所以我們可以選裝淘寶的cnpm。
- cnpm和npm用法完全一致,只需將命令中npm換為cnpm即可。
新建package.json檔案
在cmd控制檯中
- 安裝gulp和雪碧圖需要的外掛:cnpm install --
save-dev gulp.spritesmith
安裝gulp
- 安裝gulp目的是為了通過她執行gulp任務;
- 安裝命令 :命令提示符執行cnpm install gulp -g 全域性安裝;cnpm install gulp
--
save-dev 本地安裝 - 檢視版本號:檢視是否正確安裝:命令提示符執行gulp -v,出現版本號即為正確安裝。
新建gulpfile.js
var gulp=require('gulp'), //gulp基礎庫
spritesmith=require('gulp.spritesmith'), //製作雪碧圖外掛
minifycss=require('gulp-minify-css'), //css壓縮
concat=require('gulp-concat'), //合併檔案
uglify=require('gulp-uglify'), //js壓縮
rename=require('gulp-rename'), //檔案重新命名
notify=require('gulp-notify'); //提示
//雪碧圖
gulp.task('sprite',function(){
gulp.src('image/*.png')
.pipe(spritesmith({
imgName:'sprite.png',
cssName:'css/index.css',
padding:5,
algorithm:'binary-tree'
}))
.pipe(gulp.dest('123/')) //輸出目錄
})
//css壓縮
gulp.task('minifycss',function(){
gulp.src('css/*.css') //設定css
.pipe(concat('main.css')) //合併後css檔名,沒有壓縮
.pipe(gulp.dest('dist/styles')) //設定輸出路徑
.pipe(rename({suffix:'.min'})) //修改檔名
.pipe(minifycss()) //壓縮檔案
.pipe(gulp.dest('dist/styles')) //輸出檔案目錄
.pipe(notify({message:'css task ok'})); //提示成功
});
//JS壓縮
gulp.task('minifyjs',function(){
gulp.src(['js/*.js']) //選擇合併的JS
.pipe(concat('alert.js')) //合併後js檔名,沒有壓縮
.pipe(gulp.dest('dist/js')) //輸出
.pipe(rename({suffix:'.min'})) //重新命名
.pipe(uglify()) //壓縮
.pipe(gulp.dest('dist/js')) //輸出
.pipe(notify({message:"js task ok"})); //提示
});
gulp.task('default',function(){
gulp.start('minifycss','minifyjs','sprite');
});
引用了gulp和spritesmith這個外掛,接著新建名為sprite的任務,我們需要合成雪碧圖的檔案在src的images資料夾裡,“*”為萬用字元,表示這個資料夾裡所有.png格式的檔案都會被使用。然後,我們把這個任務放到通道(gulp機制)裡,imgName為生成圖的名稱,css為對應生成的css檔案,padding表示合成時兩個圖片的間距。
algorithm有五個可選值,分別為top-down、left-right、diagonal、alt-diagonal、binary-tree,表現形式如下:
top-down | left-right | diagonal | alt-diagonal | binary-tree |
---|---|---|---|---|
在命令列中執行gulp命令
把生成的檔案放到dist資料夾下(生成的圖片sprite.png和css檔案),效果如下: