1. gulp
1.1. 参考
http://nodejs.cn/api/
https://www.gulpjs.com.cn/docs/
http://nodejs.cn/api/stream.html
1.2. 全局安装 gulp
npm install --global gulp
1.3. 作为项目依赖安装
npm install --save-dev gulp
1.4. 创建一个名为 gulpfile.js 的文件:
按照自己的文件配置来
var gulp = require('gulp');
var uglify = require('gulp-uglify'); // npm install --save gulp-uglify
var minfy = require('gulp-minify-css');// npm install --save gulp-minify-css ,gulp-clean-css
var concat = require('gulp-concat');// npm install --save gulp-concat
var smushit = require('gulp-smushit');// npm install --save gulp-smushit
// 创建默认任务
gulp.task('default', function() {
//js 压缩
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./static/js'));
//css 压缩
gulp.src('css/*.css')
.pipe(minfy())
.pipe(gulp.dest('./static/css'));
//合并你所需要的js文件放到dist/js文件夹下
gulp.src([
'./static/js/jquery-1.9.1.min.js',
'./static/js/bootstrap-table.js'
]).pipe(concat('main.js')).pipe(gulp.dest('./dist/js'));
//合并你所需要的css文件放到dist/css文件夹下
gulp.src([
'./static/css/bootstrap.min.css',
'./static/css/W_style.css'
]).pipe(concat('main.css')).pipe(gulp.dest('./dist/css'));
});
//images 压缩
gulp.task('images',function(){
gulp.src('images/*.*')
.pipe(smushit({
verbose: true
}))
.pipe(gulp.dest('dist/images')).on( 'end', () => {
console.log('images_end');
});
})
2. 执行
gulp
#gulp default 等同 gulp
gulp images //images 压缩