刚开始我先接触了 grunt, 但是再学习 gulp 之后, 个人觉得 gulp 的使用方式比较统一, 不像 grunt 那么混乱, 更易于维护, 自己比较容易接受, 所以选用了 gulp 插件
部署项目一般包括以下步骤:
1 删除上次部署的所有文件;
2 复制文件网页依赖库小图标等;
3 压缩合并脚本文件;
4 压缩样式文件;
5 压缩图片;
6html 文件压缩依赖加载替换;
首先要安装 nodejs, 因为 npm 安装插件是从国外服务器下载, 受网络影响大, 可能出现异常, 所以全局安装 cnpm(官方网址: http://npm.taobao.org;):
html 代码
全局安装 gulp
html 代码
新建 package.json 文件
html 代码
package.json 是基于 nodejs 项目必不可少的配置文件, 它是存放在项目根目录的普通 json 文件;
json 代码
进入项目目录安装 gulp 插件
html 代码
例如安装 sass 编译文件:
html 代码
新建 gulpfile.js 文件 (重要)
javascript 代码
html 代码
- <!-- build:indexCSS -->
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
- <link rel="stylesheet" type="text/css" href="css/style.css" />
- <!-- endbuild -->
- <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <!-- 旋转插件 -->
- <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
- <script type="text/javascript" src="js/jquery.easing.min.js"></script>
- <!-- build:indexjs -->
- <script src="js/index.js"></script>
- <!-- endbuild -->
通过执行以下命令:
html 代码
注: 将需要用到的依赖库都要进行安装, 如 js 压缩: gulp-uglify, 要用 cnpm install gulp-uglify 进行安装才能使用
捕获一篇好文:
https://zhuanlan.zhihu.com/p/20309820grunt vs gulp
来源: http://www.qdfuns.com/article/27377/75c0240d775a8edc8387d1493efb00b8.html