前端自动化工具之gulp

gulp 作用压缩、合并js和css 文件

文件的压缩合并可以减少缓存 减少文件的网络请求可以提高网页速度，所以gulp是非常不错的工具

以下是如何安装和使用gulp
声明：主要针对Mac端

1、全局安装

$ npm install --global gulp 全局安装

注意 这里是初始化(如果不想初始化请跳过) $ npm init 
 

初始化后文件夹为空的 如下图 

下面是对比照为未初始化 多出了好多插件

$ npm install gulp 安装在当前命令所在文件的目录下

2、作为项目的开发依赖(devDependencies)安装

$ npm install --save-dev gulp

npm install --save 模块名 ：将模块下载到当前目录的node_modules中并将依赖

写入 package.json中的dependencies中

npm install --save-dev 模块名 ： 将模块下载到当前目录

的node_modules中并将依赖写入 package.json中的devDependencies中

安装后显示如下

3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

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

 // 将你的默认的任务代码放在这

});

4、运行gulp

在命令行中输入$ gulp

显示如下：

因为回调函数中什么都没有

具体用法：

首先安装插件

gulp-concat 文件合并

gulp-jsmin 压缩js文件

安装好了 下面我们就来试一下效果

这里就拿合并js文件来讲 其余原理一样：

两个单独的js文件（下图红框）

Mou icon

运行一下 $ gulp default

新生成的js文件 （下图绿框）

好了，， 到这里 js文件的压缩，合并就完成了