GruntJS前端自动化构建探究.ppt

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。 比Shell脚本易懂 比XML灵活 而且，还存在一个问题，就是凡是在这里加载的模块，也同时出现在package.json文件中。如果使用npm命令卸载模块以后，模块会自动从package.json文件中消失，但是必须手动从Gruntfile.js文件中清除，这样很不方便，一旦忘记，还会出现运行错误。 而且，还存在一个问题，就是凡是在这里加载的模块，也同时出现在package.json文件中。如果使用npm命令卸载模块以后，模块会自动从package.json文件中消失，但是必须手动从Gruntfile.js文件中清除，这样很不方便，一旦忘记，还会出现运行错误。 非常多插件： 甚至有自动对Handlebars模版进行格式化的插件 例如， 利用grunt.event实现文件内容发生变更后，对相应文件进行编译、压缩等操作。 利用grunt.config实现了对特定变更文件的处理。 举例： 简化重复工作：JS、CSS合并压缩、JSHint代码质量检测、TDD式开发 符合前端趋势：LESS SASS CoffeeScript Dart Handlebars预编译 实现模块化 一些框架包括jquery、bootstrap、wordpress、SeaJS也是基于Grunt 正在通过Grunt构建 一些公司例如Twitter、Adobe在使用Grunt nodejs依赖：反过来也增加对nodejs的了解 IDE支持：新版本IntelliJ、WebStrom开始支持Grunt 1. HTML+CSS+JS编码 2. 浏览器调试 3.发布上线 -- 这个开发流程可以很好的满足传统的前端开发 前端自动化构建 —— 初探Grunt 构建工具 Why Grunt? 为什么是Grunt？ 传统的开发流程 调试 上线 编码 追求更好的用户体验 1. 运用新技术改善交互： 2. 优化代码提升性能： 压缩 合并 预编译 ＋ ＝ 当传统流程遇见新技术 调试 上线 编码 手动 SASS/LESS/CoffeeScript 编译 手动 Handlebars 模版预编译 手动 JSHint 代码质量检测 手动 Jasmine/QUnit 单元测试 手动 Uglify 对JavaScript、CSS压缩混淆 手动 HTMLMin 对HTML压缩 手动 imagemin 批量压缩图片 手动 合并静态文件，减少页面请求 手动修改文件引用路径 压缩 每一步，都要手动执行！ 合并 编译 难道创造好的用户体验真的就那么难？ Grunt简介 简单说，Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程，减轻重复性工作带来的负担。 Grunt的安装与运行 前提： Grunt需要Nodejs环境，这里假设你已经安装好了Nodejs和NPM，因为下面的代码需要在命令行中运行，所以推荐安装一个好用的Shell工具。 安装： 1. npm install -g grunt-cli 运行： 1. cd ~/workspace/project/WebApp 2. grunt build // 使用NPM安装 grunt-cli // 进入已配置Grunt模块的项目目录 // 运行Grunt, 执行相应任务 小贴士：Windows下推荐使用Gow, MinGW MSYS, Cygwin等工具替代cmd.exe Grunt 项目的结构 注意： Grunt的核心模块并非全局安装，而是在项目中单独存在，保持项目使用Grunt插件与Grunt核心模块版本一致，避免由于版本不同造成冲突。同时，Grunt是非侵入式的，对项目原有结构影响较小。 WebApp/ ├─ grunt/ │ ├─ Gruntfile.js │ ├─ package.json │ └─ node_modules/ │ ├─ grunt/ │ ├─ grunt-contrib-sass/ │ └─ ... ├─ res/ │ ├─ theme/ │ ├─ common/ │ └─ ... ├─ index.html └─ ... // 推荐将Grunt配置在前端WebApp的根目录 // Grunt的任务配置文件 // 项目信息, 模块依赖声明 // 存放相关模块// Grunt的