gulp压缩整合css和js文件

具体可参考官网：http://www.ydcss.com/archives/18#lesson5

个人感觉简单，粗暴，好用

傻瓜式操作：

1.首先安装node.js（查看版本node-v）

2. 全局安装gulp :     npm install gulp -g   

3. 新建文件夹，在当前文件夹下   npm init    （会自动通过npm下载package.json）

4. 本地安装gulp    npm install gulp --save-dev  （相关配置自动保存package.json中）

5. 新建一个gulpfile.js文件  （文件结构如：）

 

6. 

 

 

 

 

 

 

 

7. npm install gulp-concat --save-dev   gulp教程之gulp-concat （整合js文件--将多个文件合并为一个，减少http请求，加快访问速度）  （将以下代码复制到gulpfile.js中）

var gulp = require('gulp'),

concat = require('gulp-concat');

gulp.task('testConcat', function () {

gulp.src('js/*.js')    //要合并的所有js文件

.pipe(concat('all.js'))//合并后的文件名

.pipe(gulp.dest('dest/js'));  //合并后存放的目录，如果没有目录会自动创建

});

 

8. npm install gulp-uglify --save-dev    gulp教程之gulp-uglify （压缩js文件，减小文件体积） （将以下代码复制到gulpfile.js中）

 

var gulp = require('gulp'),

uglify = require('gulp-uglify');

gulp.task('jsmin', function () {

gulp.src('src/js/index.js')

.pipe(uglify())

.pipe(gulp.dest('dist/js'));

});

 

9.  npm install gulp-minify-css --save-dev    gulp教程之gulp-minify-css【gulp-clean-css】 （压缩整合css文件） （将以下代码复制到gulpfile.js中）

 

var gulp = require('gulp'),

cssmin = require('gulp-minify-css');

gulp.task('clean', function () {

gulp.src('css/*.css')

.pipe(cssmin())

.pipe(gulp.dest('dest'));

});

拿7，8，9任意一个举例如图所示：