gulp是什么纯陨？使用 gulp 實(shí)現(xiàn)圖片壓縮、CSS 壓縮合并趾访、JS 壓縮合并
gulp是一個(gè)基于流的構(gòu)建工具态秧，可以自動(dòng)執(zhí)行指定的任務(wù)，簡(jiǎn)潔且高效
- 開發(fā)環(huán)境下扼鞋，想要能夠按模塊組織代碼申鱼，監(jiān)聽實(shí)時(shí)變化
- css/js預(yù)編譯，postcss等方案云头，瀏覽器前綴自動(dòng)補(bǔ)全等
- 條件輸出不同的網(wǎng)頁(yè)捐友，比如app頁(yè)面和mobile頁(yè)面
- 線上環(huán)境下，我想要合并溃槐、壓縮 html/css/javascritp/圖片匣砖，減少網(wǎng)絡(luò)請(qǐng)求，同時(shí)降低網(wǎng)絡(luò)負(fù)擔(dān)
var gulp = require('gulp');
//引入組件
var minifycss = require('gulp-minify-css'), //css壓縮
uglify = require('gulp-uglify'), //js壓縮
concat = require('gulp-concat'), //合并文件
rename = require('gulp-rename'), //重命名
clean = require('gulp-clean'), //清空文件夾
minhtml = require('gulp-htmlmin'), //html壓縮
jshint = require('gulp-jshint'), //js代碼規(guī)范性檢查
imagemin = require('gulp-imagemin'); //圖片壓縮
gulp.task('html', function(){
return gulp.src('src/*.html')
.pipe(minhtml({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
});
gulp.task('css', function(argument){
gulp.src('src/*.css')
.pipe(concat('merge.min.css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minfycss())
.pipe(gulp.dest('dist/css/'))
})
gulp.task('js', function(argument){
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'))
})
gulp.task('img', function(argument){
gulp.src('src/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs'))
})
gulp.task('clear', function(){
gulp.src('dist/*', {read: false})
.pipe(clean())
})
gulp.task('build', ['html', 'css', 'js', 'img '])
//執(zhí)行
/*
gulp html //html壓縮
gulp css //css壓縮合并
gulp js //js書寫規(guī)范昏滴，壓縮
gulp img //img壓縮
gulp clear //清空文件夾
gulp build //執(zhí)行以上
*/
簡(jiǎn)單的了解了gulp猴鲫，我們可以試著做個(gè)小小的測(cè)試，看下gulp是怎么壓縮css的
首先我們得做好準(zhǔn)備工作
在gitbash輸入以下幾個(gè)命令行：
- 全局安裝：
npm install gulp-cli -g - 當(dāng)前文件夾下安裝：
npm install gulp -D等同于npm install gulp --save-dev - 在當(dāng)前文件夾下初始化：
npm init(因?yàn)槲覀冃枰粋€(gè)package.json文件) - 安裝好這個(gè)cssnano：
npm install --save-dev gulp-cssnano（用于壓縮文件） - 安裝好這個(gè)concat：
npm install --save-dev gulp-concat（用于合并文件）
我們開始第一步具體的操作了：
寫好文件結(jié)構(gòu)谣殊，src用來(lái)放css文件和js文件拂共，dist是輸出目錄，新建gulpfile.js姻几，index.html宜狐，nodejs自動(dòng)生成的package.json
在gulpfile.js里寫下如下代碼
var gulp = require('gulp')
var cssnano = require('gulp-cssnano')
var concat = require('gulp-concat')
gulp.task('css', function () { // gulp.task創(chuàng)建一個(gè)css任務(wù)
gulp.src('./src/css/*.css') // 通過src定位到需要去處理的所有css文件，括號(hào)里是地址
.pipe(concat('index-merge.css')) // 把所有的css文件合并成一個(gè)文件鲜棠，文件名是index-merge.css
.pipe(cssnano()) // index-merge.css文件傳遞到這里肌厨，進(jìn)行壓縮
.pipe(gulp.dest('dist/css')) //壓縮之后把文件輸出到dist目錄下的css目錄
})
gulp.task('default', ['css'])
寫好之后編寫我們的css代碼，例如我的html文件里寫下h1,h2,h3標(biāo)簽豁陆，每個(gè)標(biāo)簽單獨(dú)用一個(gè)css文件來(lái)寫它的顏色樣式
準(zhǔn)備工作做好之后柑爸，我們就可以在命令行里輸入gulp css或者gulp（如果想直接輸如gulp就能壓縮，需要加上最后一句gulp.task('default', ['css'])
輸入之后我們就能看到dist/css目錄下多了個(gè)index-merge.css文件盒音，這樣我們就壓縮好了css文件表鳍，在html里引用這個(gè)生成好的css文件就可以達(dá)到想要效果了
注意：css合并是按照順序來(lái)合并的！因?yàn)閏ss有權(quán)重的祥诽，注意順序的話就不會(huì)導(dǎo)致權(quán)重不同的被覆蓋
還有譬圣，假如使用npm安裝插件太慢了，可以執(zhí)行
npm install -g cnpm --registry=https://registry.taobao.org
先安裝cnpm雄坪，之后在安裝插件時(shí)用cnpm安裝cnpm install gulp厘熟。
如果你之后需要發(fā)布node工具時(shí)遇到這個(gè)報(bào)錯(cuò)
說明你是進(jìn)入了私有模式，
需要輸入
npm config set registry http://registry.npmjs.org
設(shè)置回原本的就可以了
