项目实战-Gulp使用

最新推荐文章于 2024-10-11 22:47:38 发布

anzhu1380

最新推荐文章于 2024-10-11 22:47:38 发布

阅读量78

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/tgwang/p/4843641.html

版权

引言

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

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

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

正文

1. 安装NodeJS

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

2. 安装Gulp环境

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

使用CMD命令进入node.js的node.exe所在目录，运行命令：
```
 npm config set registry http://registry.cnpmjs.org/
```
安装npm全局环境，运行命令：
```
 npm install gulp –g
```

3. 项目中使用Gulp

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

安装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

新建文件名为 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');
 });