使用Glup.JS優(yōu)化JS、CSS、圖片，壓縮合并
說(shuō)在開(kāi)頭
創(chuàng)新互聯(lián)公司始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過(guò)多達(dá)10多年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營(yíng)銷(xiāo)推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：發(fā)電機(jī)回收等企業(yè)，備受客戶贊揚(yáng)。
前幾天生病沒(méi)去上班，在家里玩了一下Glup
Gulp.js 是一個(gè)自動(dòng)化構(gòu)建工具，你可以用它在項(xiàng)目中自動(dòng)執(zhí)行常見(jiàn)任務(wù)，
如：壓縮優(yōu)化JS、壓縮CSS、壓縮圖片等。與Grunt相比，Gulp編寫(xiě)任務(wù)tasks更加簡(jiǎn)單，也更易于閱讀和維護(hù)，插件高質(zhì)而簡(jiǎn)潔。Gulp.js基于 Node.js 構(gòu)建，利用 Node.js的Stream流，使項(xiàng)目可以快速構(gòu)建并減少 IO 操作。
之前折騰過(guò)Express，做過(guò)一個(gè)簡(jiǎn)單的微博，最后連接數(shù)據(jù)庫(kù)monogo時(shí)出了點(diǎn)問(wèn)題，不了了之了。
這是一個(gè)基于 Node.js 平臺(tái)的極簡(jiǎn)、靈活的 web 應(yīng)用開(kāi)發(fā)框架，它提供一系列強(qiáng)大的特性，幫助你創(chuàng)建各種 Web 和移動(dòng)設(shè)備應(yīng)用。
之前安裝過(guò)程遇到了一點(diǎn)小問(wèn)題特此記錄一下。
是這樣的安裝完Express之后，執(zhí)行Express xxx命令提示不是內(nèi)部命令
最后百度了一下有一篇博客
http://jingyan.baidu.com/article/922554468a3466851648f419.html
給出了解決方案。原因是：
原來(lái),最新express4.0版本中將命令工具分家出來(lái)了(項(xiàng)目地址:https://github.com/expressjs/generator),所以我們還需要安裝一個(gè)命令工具
正文
下面進(jìn)入正題，簡(jiǎn)單說(shuō)一下如何安裝，使用gulp
1. 安裝Gulp
gulp的任務(wù)處理機(jī)制是，將來(lái)源檔案當(dāng)作輸入，通過(guò)Node.js的Stream操作流，并將流導(dǎo)向gulp的任務(wù)處理插件plugins，處理完成后將結(jié)果輸出到指定輸出目錄。
從gulp的任務(wù)處理機(jī)制可以看出，gulp相當(dāng)于一個(gè)任務(wù)管理器，而實(shí)際的業(yè)務(wù)處理是由其插件完成的。因此，gulp的安裝也包括：安裝gulp和安裝gulp任務(wù)插件兩部分。
1.1 安裝Gulp
安裝gulp，你可以選擇全局安裝或安裝在項(xiàng)目的dev開(kāi)發(fā)環(huán)境下。
全局安裝gulp：
npm install gulp -g
在項(xiàng)目的dev開(kāi)發(fā)環(huán)境中安裝：
npm install gulp --save-dev
在開(kāi)發(fā)環(huán)境安裝后，會(huì)在項(xiàng)目package.json文件的devDependencies節(jié)點(diǎn)下保存。建議對(duì)gulp使用全局安裝，這樣可以在所有項(xiàng)目中使用。全局安裝對(duì)于非Node.js項(xiàng)目尤為適用。
1.2 安裝Gulp插件
gulp插件的安裝，也可以使用全局安裝或安裝在dev開(kāi)發(fā)環(huán)境，我比較推薦使用全局安裝。gulp插件可以按需安裝，如果你只需要處理CSS，那么只安裝CSS相關(guān)處理插件即可。gulp的所有插件請(qǐng)參考：Gulp插件。對(duì)于CSS文件處理、JS文件處理、圖片處理，你可能需要以下插件：
gulp-ruby-sass：基于ruby和sass的Sass文件編譯，可將Sass文件為CSS文件
gulp-autoprefixer：Autoprefixer，可以解析CSS文件，并且添加瀏覽器前綴到CSS規(guī)則里
gulp-minify-css：CSS文件壓縮工具
gulp-jshint：JSHint，一個(gè)JS代碼檢查工具，可以檢測(cè)JavaScript中錯(cuò)誤和潛在問(wèn)題
gulp-uglify：uglify，JS代碼優(yōu)化工具，可用于壓縮和美化（或者叫“丑化”）JavaScript代碼
gulp-concat：文件拼接工具，可用于多個(gè)CSS文件或多個(gè)JS文件的合并
gulp-p_w_picpathmin：p_w_picpathmin，圖片壓縮工具
一般來(lái)說(shuō)上面介紹的插件可以滿足一般前端資源的處理，比如：less和sass文件的編譯、CSS文件的合并壓縮、JS文件的合并壓縮、圖片的壓縮。在日常工作中，你可能還需要一些處理，像執(zhí)行g(shù)ulp任務(wù)前清理目錄、服務(wù)端資源的監(jiān)控、只針對(duì)變更資源的處理等，下面的一些插件可能會(huì)用到：
gulp-clean：目標(biāo)目錄清理，在用于gulp任務(wù)執(zhí)行前清空目標(biāo)目錄
gulp-cache：資源緩存處理，可用于緩存已壓縮過(guò)的資源，如：圖片
gulp-notify：任務(wù)通知工具，可用于某項(xiàng)任務(wù)執(zhí)行完成的在控制臺(tái)輸出通知
gulp-livereload：服務(wù)器資源監(jiān)控，當(dāng)服務(wù)端資源變化時(shí)對(duì)頁(yè)面進(jìn)行刷新。需要要配合瀏覽器插件使用或在頁(yè)面這樣處理，使用比較復(fù)雜，非必要時(shí)不推薦使用
在dev開(kāi)發(fā)環(huán)境下安裝這些插件：
npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-p_w_picpathmin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
2. 使用Gulp
2.1 gulp一些常用的API
要深入了解gulp，建議查看其官方文檔。對(duì)于一般使用gulp，了解下面幾個(gè)API，即可滿足日常需求：
gulp.task()：方法用來(lái)定義任務(wù)，內(nèi)部使用的是Orchestrator
gulp.src()：gulp是基于Node.js的流進(jìn)行任務(wù)轉(zhuǎn)接及處理的，gulp.src()用于引入流，即：讀取要操作的文件?？梢允窍旅鎺追N：
/public/js/index.js：指定的一個(gè)文件
/public/js/*.js：某個(gè)目錄下的所有文件
/public/**/*.js：目錄下及其所有子目錄下的所有js文件
!/public/js/main.js：某個(gè)目錄下，除main.js以外的所有js文件
*.+(js|css);正則表達(dá)式匹配根目錄下擴(kuò)展名是js和css的所有文件
gulp.dest()：在指定路徑輸出文件。只能對(duì)其指定路徑，而不能對(duì)輸出文件重命名，重命名可以使用插件gulp-rename
gulp.watch()：監(jiān)視文件的變化（如：CSS、JS、圖片），當(dāng)文件發(fā)生變化后，我們可以利用它來(lái)執(zhí)行相應(yīng)的任務(wù)
2.2 gulp使用示例
以expressWeb框架為例
在全局安裝gulp及相關(guān)插件后，創(chuàng)建gulpfile.js文件（在本例中，文件在項(xiàng)目根目錄下）。gulpfile.js文件內(nèi)容如下
var gulp = require('gulp'),
// sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
p_w_picpathmin = require('gulp-p_w_picpathmin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
// 樣式處理任務(wù)
gulp.task('styles', function() {
return gulp.src('public/stylesheets/*.css') //引入所有CSS
.pipe(concat('main.css')) //合并CSS文件
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('public/dist/css')) //完整版輸出
.pipe(rename({ suffix: '.min' })) //重命名
.pipe(minifycss()) //CSS壓縮
.pipe(gulp.dest('public/dist/css')) //壓縮版輸出
.pipe(notify({ message: '樣式文件處理完成' }));
});
// 如果需要通過(guò)scss文件編譯css，就使用這段代碼
// gulp.task('styles', function() {
// return gulp.src('public/html/css/main.scss')
// .pipe(sass({ style: 'expanded', }))
// .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
// .pipe(gulp.dest('public/dist/styles'))
// .pipe(rename({ suffix: '.min' }))
// .pipe(minifycss())
// .pipe(gulp.dest('public/dist/styles'))
// .pipe(notify({ message: 'Styles task complete' }));
// });
// JS處理任務(wù)
gulp.task('scripts', function() {
return gulp.src('public/javascripts/*.js') //引入所有需處理的JS
.pipe(jshint.reporter('default')) //S代碼檢查
.pipe(concat('main.js')) //合并輸出的JS文件名稱
.pipe(gulp.dest('public/dist/js')) //完整版輸出路徑
.pipe(rename({ suffix: '.min' })) //重命名
.pipe(uglify()) //壓縮JS
.pipe(gulp.dest('public/dist/js')) //壓縮版輸出路徑
.pipe(notify({ message: 'JS文件處理完成' }));
});
// 圖片處理任務(wù)
gulp.task('p_w_picpaths', function() {
return gulp.src('public/p_w_picpaths/*') //引入所有需處理的JS
.pipe(p_w_picpathmin({ optimizationLevel: 3, progressive: true, interlaced: true })) //壓縮圖片
// 如果想對(duì)變動(dòng)過(guò)的文件進(jìn)行壓縮，則使用下面一句代碼
// .pipe(cache(p_w_picpathmin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('public/dist/img'))
.pipe(notify({ message: '圖片處理完成' }));
});
// 目標(biāo)目錄清理
gulp.task('clean', function() {
return gulp.src(['public/dist/css', 'public/js', 'public/img'], {read: false})
.pipe(clean());
});
// 預(yù)設(shè)任務(wù)，執(zhí)行清理后，
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'p_w_picpaths');
});
// 文檔臨聽(tīng)
gulp.task('watch', function() {
// // 監(jiān)聽(tīng)所有.scss文檔
// gulp.watch('src/styles/**/*.scss', ['styles']);
// 監(jiān)聽(tīng)所有css文檔
gulp.watch('public/html/css/*.css', ['styles']);
// 監(jiān)聽(tīng)所有.js檔
gulp.watch('public/html/js/*.js', ['scripts']);
// 監(jiān)聽(tīng)所有圖片檔
gulp.watch('public/html/img/*', ['p_w_picpaths']);
// // 創(chuàng)建實(shí)時(shí)調(diào)整服務(wù)器 -- 在項(xiàng)目中未使用注釋掉
// var server = livereload();
// // 監(jiān)聽(tīng) dist/ 目錄下所有文檔，有更新時(shí)強(qiáng)制瀏覽器刷新（需要瀏覽器插件配合或按前文介紹在頁(yè)面增加JS監(jiān)聽(tīng)代碼）
// gulp.watch(['public/dist/**']).on('change', function(file) {
// server.changed(file.path);
// });
});執(zhí)行g(shù)ulp命令前，public目錄結(jié)構(gòu)是下面這樣的：
在項(xiàng)目根目錄下，執(zhí)行命令：
gulp
執(zhí)行g(shù)ulp命令后，public目錄結(jié)構(gòu)是下面這樣的：
gulp操作成功，文件被輸出到了publi/dist目錄下，CSS和JS文件都有完整版和壓縮版兩個(gè)，
圖片也經(jīng)過(guò)了壓縮處理。如果需要進(jìn)行其它處理，可自行修改gulpfile.js文件代碼。
最后
相關(guān)博客
http://witcheryne.iteye.com/blog/1165067
2.http://www.gulpjs.com.cn/docs/api/
3.http://itbilu.com/nodejs/npm/VJ4oWdjd.html
4.http://www.expressjs.com.cn/
網(wǎng)站名稱：使用Glup.JS優(yōu)化JS、CSS、圖片，壓縮合并
網(wǎng)站網(wǎng)址：http://muchs.cn/article2/piddoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、定制開(kāi)發(fā)、定制網(wǎng)站、企業(yè)建站、網(wǎng)頁(yè)設(shè)計(jì)公司、全網(wǎng)營(yíng)銷(xiāo)推廣
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
