gulp 压缩js/css文件

[NancyFan]

gulp 压缩 js/css 文件

gulp 是基于 node.js 的前端构建工具。它能通过自动执行常见任务，比如编译预处理CSS，压缩和合并JavaScript，来改进网站开发的过程。本文将一步步教你如何使用 gulp 来压缩 js/css 文件。

Node.js安装

安装使用 gulp 前，需要确保你的PC上已经安装 node.js ！未安装的同学可以点击下载安装，下载完成后直接运行程序 。npm 会随着安装包一起安装。

gulp安装

完成 node.js 的安装后，打开 node.js command prompt，就可以使用 npm 开始安装 gulp 了。

1. 首先进入你的项目目录，举个栗子：cd D:/project
2. 成功进入项目目录后，执行命令安装全局 gulp：npm install gulp -g
3. 接下来，将 gulp 安装到项目本地: npm install gulp --save-dev

安装完成后你的项目文件中会出现 node_modules 文件夹：

当然安装好gulp后，还需要安装相应的插件才可以实现压缩功能。这里需要下载安装以下插件：

1. gulp-minify-css (css 压缩)
2. gulp-concat (js 合并)
3. gulp-jshint (压缩前对 js 代码的检测)
4. gulp-rename (重命名，压缩后需要对文件添加 .min 后缀名)
5. gulp-uglify (js 压缩)

执行以下命令就可以安装插件：
npm install gulp-minify-css gulp-concat gulp-jshint gulp-rename gulp-uglify --save-dev
这时安装完的插件就会出现在 node_modules 文件夹中。如下图：

gulp使用

现在准备工作已经全部完成，可以开始使用gulp了。

1. 在根目录下新建gulpfile.js文件。
2. 在gulpfile.js文件中添加以下代码以指定gulp需要为我们完成什么任务：

OK，在根目录下执行gulp命令, 你就可以在css和js文件夹中看到相应压缩好的文件了。

[YIXUNFE]

简单明了，好 ~ :clap::clap::clap: