2017-09-01 编译LESS

第一次知道node还是2014年，据说很神很神，不过也确实很神秘，因为从未真正了解它。。
今年6月21号，接触新的项目，项目要求所有样式集成进less文件，并打包编译，并且公司的Fish支持Fish-cli，所以安装了nodejs(v5.10.0)，并按照亚洲的文档【框架部分总结-fish-cli】配置了fish-cli，可以使用fish b直接编译宁波的项目【目前还没用过，汗】。。

image.png

image.png

但是，之前的很多项目，都是使用grunt编译的，这不，今天就需要调毕节项目的样式，问了几个人，他们的答复都是时间长了，记不得了。。。所以只能自己探索。
google被墙，只能度娘。。。。
参考链接A：编译less
参考链接B：grunt入门

1. 安装node【已经完成】，很easy，全程下一步；
2. 安装grunt-cli，“CLI”被翻译为“命令行”。要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npm install…”进行安装。

npm install -g grunt-cli

image.png

这时候要验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入“grunt”命令即可。如果生效，则会出现以下结果：

image.png

出现这些提示，证明你的grunt-cli安装成功。

3. 本地安装grunt【具体项目中】。注意，这里安装grunt不再是全局安装了，需要你在控制台进入到网站或系统的具体目录下。测试项目【F:\grunt_test】：

npm install grunt --save-dev

image.png

image.png

• 打开package.json看下，“devDependencies”有什么变化？【参数--save-dev】

image.png

• 多了一个“node_modules”文件夹，其中有一个“grunt”文件夹，再其中有若干文档。这里就是存储grunt源文件的地方。

image.png

如上图，如果你得到一个warning提示，那说明grunt已经起作用了，grunt已经在这个目录下成功安装。

image.png

4. Grunt插件(插件列表)。插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。

• Contrib-jshint——javascript语法错误检查；
• Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
• Contrib-clean——清空文件、文件夹；
• Contrib-uglify——压缩javascript代码；
• Contrib-copy——复制文件、文件夹；
• Contrib-concat——合并多个文件的代码到一个文件中；
• karma——前端自动化测试工具；

安装插件uglify，测试压缩效果：npm install grunt-contrib-uglify --save-dev

image.png

不知道为啥，执行压缩之后，文件有了 但是 min.js里面没有内容，有待研究！
初步判断是uglify版本的问题，两个版本结果如下：

"grunt-contrib-uglify": "^3.0.1"

"grunt-contrib-uglify": "^0.5.0"

5. 使用watch插件（真正实现自动化）【暂时未研究】
6. 批量安装插件。“node_modules”一般是不上传的，其他一起开发的人，怎么得到这些grunt插件和工具呢？有人会说让他们自己去手动一个一个安装---首先这是一个笨方法，其次如果我当年安装的旧版本，而他们现在自己安装的可能是新版本。新旧有可能不兼容啊。

该怎么办？
其实答案很简单---上传源码时，把package.json上传上去，其中的 “devDependencies”就记录了这个系统的开发依赖项，然后通过nodejs的npm即可批量安装。
npm install

7. 前面456做了一个测试，深入了解了下grunt及其插件，下面言归正传。

• 进入项目的webapp目录；
• 执行grunt，ok；

image.png