项目实战-Gulp使用

引言

在工作中，经常会遇到要把文件合并和压缩等操作，我经历过下面的演进过程：

• 使用ajaxmin工具手动合并和压缩
• 使用Grunt合并和压缩
• 使用Gulp合并和压缩

这里不探讨Grunt和Gulp的优劣（详细的对比 自己去看），看开发者自己的喜好吧。

正文

1. 安装NodeJS

目前（2015.09.28）的版本是 v4.1.1，前去现在 ， 【网站能进去，下载可能不行，应该是被墙了，和谐社会，大侠们各显神通吧】，下载下来之后，直接安装就可以了。

2. 安装Gulp环境

如果直接使用命令安装Gulp会被墙掉，下载不下来，需要先修改默认镜像为国内镜像，具体步骤如下：

1. 使用CMD命令进入node.js的node.exe所在目录，运行命令：

    npm config set registry http://registry.cnpmjs.org/
   

2. 安装npm全局环境，运行命令：

    npm install gulp –g
   

3. 项目中使用Gulp

1. 进入项目的适当位置（一般为根本目录或前端代码的最上层），运行安装本地Gulp环境，运行命令：

    npm install gulp --save-dev
   

2. 安装css,js压缩的环境，运行命令：

    npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint del --save-dev
   
    /////////////////
   
    1.css压缩 　　gulp-minify-css
    2.js压缩　　　gulp-uglify
    3.js合并　　　gulp-concat　
    4.重命名　　   gulp-rename
    5.js代码检测　 gulp-jshint　(或gulp-jslint)
    6.文件删除	  del
   

3. 新建文件名为 gulpfile.js 文件，样本文件：

    var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
        concat = require('gulp-concat'),
        uglify = require('gulp-uglify'),
        rename = require('gulp-rename'),
        del = require('del');
   
    //压缩css
    gulp.task('minify_css',["clean"], function () {
    	var cssSrc = ['./css/*.css'];
   
    	return gulp.src(cssSrc)      //压缩的文件
    		.pipe(concat('all.css'))    //合并所有css到all.css
            .pipe(gulp.dest('./main/css'))   //输出文件夹
    		.pipe(rename({suffix: '.min'}))
    		.pipe(minifycss())
    		.pipe(gulp.dest('./main/css'));	//执行压缩
    });
   
    //压缩js
    gulp.task('minify_js',["clean"], function() {
    	var jsSrc = ['./lib/*.js','!./lib/*.src.js'];
   
        return gulp.src(jsSrc)
            .pipe(concat('all.js'))    //合并所有js到all.js
            .pipe(gulp.dest('./lib'))    //输出all.js到文件夹
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest('./lib'));  //输出
    });
   
    //执行压缩前，先删除以前压缩的文件
    gulp.task('clean', function() {
        return del(['./css/all.css', './css/all.min.css', './lib/all.js', './lib/all.min.js'])
    });
   
    // 默认任务
    gulp.task('default', function(){
        gulp.run('minify_css', 'minify_js');
    });
   

4. 根据业务需求修改 gulpfile.js

5. 直接运行gulp命令

6. 检查压缩文件，是否正常

做技术就是这样，很多东西要先学会使用，再求深入了解，但不能只停留在会使用的阶段