安裝nodejs；
新建package.json文件；
全局安裝gulp；
全局安裝gulp目的是為了通過她執(zhí)行g(shù)ulp任務(wù)：cnpm install gulp -g新建package.json文件
cnpm init本地安裝gulp
為了能正常使用，我們還得本地安裝gulp：cnpm install gulp --save-dev安裝gulp插件；
cnpm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev
- 新建gulpfile.js文件；
// 在你的項(xiàng)目根目錄下創(chuàng)建gulpfile.js，代碼如下：
// 引入 gulp
var gulp = require('gulp');
// 引入組件
var htmlmin = require('gulp-htmlmin'), //html壓縮
imagemin = require('gulp-imagemin'),//圖片壓縮
pngcrush = require('imagemin-pngcrush'),
minifycss = require('gulp-minify-css'),//css壓縮
jshint = require('gulp-jshint'),//js檢測
uglify = require('gulp-uglify'),//js壓縮
concat = require('gulp-concat'),//文件合并
rename = require('gulp-rename'),//文件更名
notify = require('gulp-notify');//提示信息
// 壓縮html
gulp.task('html', function() {
return gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dest'))
.pipe(notify({ message: 'html task ok' }));
});
// 壓縮圖片
gulp.task('img', function() {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest('./dest/images/'))
.pipe(notify({ message: 'img task ok' }));
});
// 合并、壓縮、重命名css
gulp.task('css', function() {
return gulp.src('src/css/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('dest/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dest/css'))
.pipe(notify({ message: 'css task ok' }));
});
// 檢查js
gulp.task('lint', function() {
return gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(notify({ message: 'lint task ok' }));
});
// 合并、壓縮js文件
gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dest/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dest/js'))
.pipe(notify({ message: 'js task ok' }));
});
// 默認(rèn)任務(wù)
gulp.task('default', function(){
gulp.run('img', 'css', 'lint', 'js', 'html');
// 監(jiān)聽html文件變化
gulp.watch('src/*.html', function(){
gulp.run('html');
});
// Watch .css files
gulp.watch('src/css/*.css', ['css']);
// Watch .js files
gulp.watch('src/js/*.js', ['lint', 'js']);
// Watch image files
gulp.watch('src/images/*', ['img']);
});
- 通過命令提示符運(yùn)行g(shù)ulp任務(wù)。
gulp default
