gulp

安装

新建一个nui-demo文件夹，目录结构是如下形式：

全局安装gulp：

终端中路径切换到nui-demo目录，然后分别安装gulp以及gulp-nui：

使用

编辑/src/script/app.js文件，添加如下代码：

编辑/src/script/content.js文件，添加如下代码：

编辑/html/index.html文件，添加如下代码：

浏览器打开/html/index.html文件，你会发现并没有输出Hello World，并且有个404错误，错误文件名是app-min.js。 咦？不是加载的是app.js吗？这是因为Nui.load默认加载的就是带-min后缀的文件，不要捉急，继续下一步操作。

编辑gulpfile.js，添加如下代码：

如果之前终端窗口没有关闭，输入gulp，回车之后，你会发现app.js所在目录多了app-min.js以及app-min.js.map 2个文件， 浏览器打开/html/index.html，页面出现了Hello World。

我们再次编辑content.js，将里面的Hello World改为Hello World2，然后刷新浏览器，发现内容并没有改变，这是怎么回事呢？ 如果你之前已经熟悉了gulp，那肯定知道原因，先不谈为什么，我们在终端再次输入gulp并回车（这里提供一个小技巧，可以按方向键“↑”，内容会自动变更为上一次输入内容）， 刷新浏览器后内容变了。此时你可能会想，WTF！难道每次改过代码都要重新执行一次？当然肯定不会这样做项目，咱们编辑一下gulpfile.js，改为如下代码：

再次执行gulp后，编辑js文件，你会发现每次输入新的内容，都会生效，这就是gulp的任务监听功能，监听文件的变化重新执行任务。

现在显示的内容没有样式，希望文字能够显示红色，/src/中新建一个style文件夹，并新建一个color.css（也可以是less文件），文件内容如下：

编辑app.js，修改为以下内容：

这时你会发现style文件夹中多了app-min.css以及app-min.css-map2个文件，但是刷新页面没有任何效果， 这是因为样式并没有引入到页面中，我们编辑index.html，修改内容如下：

刷新页面，文件变为了红色，现在我们想把文字颜色变为蓝色，修改内容后却发现没有生效，奇怪了，之前不是已经设置了文件监听吗？ 注意看你gulpfile.js中监听文件这部分代码，监听的只是js文件，找到问题之后修改内容如下：

因为改的是配置文件，因此需要重新执行gulp，先Ctrl+C退出，重新执行后，刷新页面内容变为了蓝色，这时再修改为其它颜色，都可以看到效果。

现在假设nui-demo文件夹同级目录中有张图片，我想引入到页面中，但是又不想手动拷贝图片到nui-demo/src/images/中。 gulp-nui则提供一个图片打包的功能，能够将非项目中的资源自动拷贝到项目中，下面介绍一下怎么实现吧。

编辑config.js，输入以下内容：

base属性表示项目根目录，我的页面是直接访问的，不是在服务器环境下，但是index.html不在根目录，因此设置为“../”，如果你的项目是放在服务器环境，并且根目录就是nui-demo，可不用设置，因为默认值就是当前域名。 paths属性可设置路径别名，其中路径是基于根目录的，这里的asset你可以看成base + asset，也就是“../../”。

添加完之后，我们还要把这个js引入到页面中：

编辑app.js，引入图片：

引入图片只能是imports方法，不能用require，使用别名需“{别名}”的方式。引入任意资源都可以用别名，例如js、css等。

最后编辑gulpfile.js，修改内容如下：

syncAsset属性值就是在config.js中设置的路径别名，重新执行下gulp，会看到src目录下多了images/packs/文件夹，打包后的图片就存放在里面。 刷新浏览器后你会看到页面上显示了那张图片。不知道你有没有注意到，app-min.js的请求地址后面多了“v=xxx”的版本号，没错，这就是工具的清缓存功能， 只要编辑了文件，版本号都会自动修改，无需担心项目发布后资源缓存的问题。

至此gulp-nui的主要功能都介绍完毕，当然工具有很多参数，这里没有全部介绍，请自行参考API去使用。

注意事项

监听文件路径去掉前面的“./”，不然无法监听新增的文件

如果使用了jQuery.validate.js插件，jsmin参数一定要添加以下配置，不然IE8-浏览器会报错

建议js和css分开监听，并通过mintype设置需要压缩的文件。如果都写一起的话，只修改了css文件，也会对js重新合并压缩，显然有些浪费且耗时