什么是 Gulp 顽腾？
它是前端自動(dòng)化構(gòu)建工作流的利器壁顶，可以使用多個(gè)插件實(shí)現(xiàn)代碼打包珠洗、壓縮、合并若专、檢測许蓖、瀏覽器自動(dòng)刷新等功能。
安裝 Gulp
npm install -g gulp
如果報(bào)Error: EACCES, open '/Users/xxx/xxx.lock錯(cuò)誤
先執(zhí)行：sudo chown -R $(whoami) $HOME/.npm
如果使用npm安裝插件太慢（被墻）,可執(zhí)行 npm install -g cnpm --registry=https://registry.npm.taobao.org,先安裝cnpm, 之后再安裝插件時(shí)用cnpm安裝cnpm install gulp
安裝打包插件
npm install --save gulp gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint gulp-imagemin gulp-clean`
gulpfile.js 配置文件
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'), // 清空文件夾
jshint = require('gulp-jshint'), // js代碼規(guī)范性檢查
imagemin = require('gulp-imagemin'); // 圖片壓縮
gulp.task('css', function(){
gulp.src('./css/*.css')
.pipe(concat('style.css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('./dist/css'));
});
gulp.task('js', function(){
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('index.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
gulp.task('img', function(){
gulp.src('./images/*')
.pipe(imagemin({optimizationLevel:5}))
.pipe(gulp.dest('./dist/images'));
});
gulp.task('clear', function(){
gulp.src('dist/*',{ read: false})
.pipe(clean());
});
gulp.task('default', ['css', 'js', 'img']);
// 終端輸入命令 gulp 回車 完成打包
