gulp压缩js和css文件

gulp的简介这里就不赘述了，最新对js和css压缩有用webpack的，但是研究了一下，好麻烦，最终转向gulp。

下面开始正式的压缩步骤：

总体概略是：

安装nodejs -> 全局安装gulp ->新建package.json文件
-> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

最下面有百度盘整个项目的链接，可以直接下载下来然后安装gulp后运行即可，里面也有nodejs7.5.msi。

详细步骤：

1、安装nodejs

用浏览器打开nodejs官网，点击绿色按钮进行下载最新版的安装文件（.msi文件），然后傻瓜式安装即可。

简单介绍下gulp在使用过程中的常用命令，打开命令提示符执行命令（windows+r，输入cmd回车即可）；

node  -v :查看nodejs的版本；

npm  -v:查看npm版本；

cd  需要进入的目录，如：cd  d:\qq

cls :清屏

     2、全局安装gulp

全局安装gulp是为了通过它来执行gulp任务。

安装：在命令行中输入npm install gulp -g;



如果在命令行中输入gulp -v，出现版本号，则说明安装成功。



注：安装时出现的WARN不用理会，不会影响你的安装及使用！

     3、在项目目录创建package.json文件

package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；

创建方法：在你项目目录上输入cmd，回车，进入到命令行窗口，然后在命令行中输入 npm init，回车，提示让  你输入项目相关信息，直接回车即可，不输入也没有问题。





此时在你的项目目录中创建了一个package.json的文件，此文件不需要你改动。

     4、在项目中安装gulp及插件

从现在开始以后的命令行操作都是在刚才打开的命令提示符窗口中操作；

安装方法：在命令提示符窗口中输入npm install  gulp --save-dev， 然后回车，等待安装完成。

  安装完成后会在项目目录下出现node_modules文件夹。



安装压缩js和压缩css的插件：在命令行中输入npm install gulp-minify-css
 gulp-uglify  --save-dev



    5、配置gulpfile.js文件

在项目文件夹下创建gulpfile.js，js中内容大致如下：

var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),

    uglify = require('gulp-uglify');
//压缩js文件，src中的数组表示压缩js下的和js下的文件夹中和js下文件夹下的文件夹中的所有js文件
gulp.task("compressJS",function(){
gulp.src(['js/*','js/*/*.js','js/*/*/*.js']).pipe(uglify()).pipe(gulp.dest('./mini/js'));
})
gulp.task("compressCSS",function(){
gulp.src(['css/*.css','css/*/*.css','css/*/*/*.css']).pipe(minifycss()).pipe(gulp.dest('./mini/css'));
})
gulp.task('default',['compressJS', 'compressCSS']);

说明：gulp.dest('./mini/js)，表示将压缩的文件存放到mini/js文件夹下，目录结构与压缩前的目录结构一致；

  6、执行压缩命令

直接在命令提示符窗口输入gulp即可，它会自动执行gulp.task默认的default方法，即compressJS和compressCSS方法；



项目最后的结构如下图：



压缩前后文件大小的对比如下图：



百度盘链接：http://pan.baidu.com/s/1kU5xKqV