在项目中使用gulp压缩css和js

在TP中使用gulp
一、安装gulp

1. gulp使用npm安装，先安装npm（如果本机上已经安装了node环境，node中已包含npm，可直接使用）

2. centos系统：

yum install npm

3. 全局安装gulp（http://www.gulpjs.com.cn/docs/getting-started/）

npm install --global gulp

如提示npm命令找不到，将npm可执行文件的路径加入到环境变量中或在环境变量中已包含的路径下建立npm的软连接

4. 项目中的js和css在public/static目录下，进入static目录下执行如下命令根据提示生成package.json文件：

npm init

5. 继续在当前目录下安装常用的css压缩、js压缩和压缩后文件重命名等几个插件作为开发依赖

   npm install --save-dev gulp-clean-css
   npm install --save-dev gulp-uglify
   npm install --save-dev rename

6. 查看package.json文件，其开发依赖部分已更新为：

...  
 "devDependencies": {
     "gulp-clean-css": "^3.8.0",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^3.0.0"
},
...

7. 在该目录下编辑gulpfile.js文件，新建js和css的压缩并重命名的任务，其中gulp.src是待处理的源文件位置，gulp.dest是处理后的目标文件位置：

   var gulp = require('gulp')
   var uglify = require('gulp-uglify')
   var rename = require('gulp-rename')
   var clean_css = require('gulp-clean-css')
   gulp.task('js',function(){
     gulp.src('js_dev/*.js')
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('js'))
   })
   gulp.task('css',function(){
    gulp.src('css_dev/*.css')
        .pipe(clean_css())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('css'))
   })
   gulp.task('c',['js','css'])

8. 执行任务

gulp c

9. 在目标文件目录下查看处理后的文件，检查文件名和内容是否符合预期。