using-grunt-js

使用Grunt.js走进前端构建新时代

Transcript

1. 使用Grunt.js走进前端构建 新时代 TooBug 2013.3
2. 那一年，世界还很美好 写HTML 写HTML+CSS 写HTML+CSS+JS 发布
3. 直到“性能”遇到了前端 写HTML 写CSS 写JS 压缩CSS 合并CSS 雪碧图 压缩JS 合并JS Base64 图片压缩 时间戳 …… 发 布
4. 前端开始有了预处理工具 ◦ YUI Compressor (Java) ◦ Google Closure Compiler (Java) ◦ CSS Tidy/Clean CSS (online) ◦ uglify (JavaScript) ◦ CSS Gaga (Windows) ◦ ……
5. 问题随之而来 ◦ 学习门槛 ＊ 每个工具 ＊ 每个人 ◦ 流程约定 & 规范 ＊ 每个人 ◦ 初始化需要安装各种平台 ◦ 复杂的配置或者约定 ◦ 跨平台？ ◦ 配置漫游？
6. 除了性能，还要质量 ◦ HTML validate ◦ CSS validate ◦ CSS Lint ◦ JSLint/Hint ◦ 测试（单元测试 、黑盒测试） ◦ ……
7. 除了它俩，还有可维护性以及“爽” ◦ LESS & BootStrap 动态样式语言，“最像CSS” ◦ SASS & Compass 动态样式语言，“最强大” ◦ Stylus 动态样式语言，“最优雅” ◦ Coffee & Coco 类python语法，填补了一些坑 ◦ Type Script 来自Microsoft ◦ Dart 来自Google
8. 自己动手，丰衣足食 手工 ◦ …… ◦ …… ◦ …… ◦ …… ◦ 杀了我吧！！！ 批处理 ◦ 学习成本高昂 ◦ 编写成本尤其高昂 ◦ 维护？ ◦ 跨平台？
9. 瑞士军刀——Grunt.js Grunt.js 压缩/合并 CSS 压缩/合并 JS 雪碧图 BASE64 图片优化 时间戳 LESS/SASS/Stylus/ Coffee/Coco 单元测试 黑盒测试 Lint/Hint Validate 想象力
10. 何方神圣？ ◦ 开源项目（gruntjs.com） ◦ 基于Node.js ◦ 命令行 ◦ 跨平台（Win/OS X/Linux） ◦ 使用时以任务（Task）为构建颗粒 ◦ 任务描述使用配置文件 ◦ 插件式（仅自带极少构建功能）
11. 一堵芳容 $ grunt Running "jshint:gruntfile" (jshint) task >> 1 file lint free. Running "jshint:src" (jshint) task >> 1 file lint free. Running "jshint:test" (jshint) task >> 1 file lint free. Running "qunit:files" (qunit) task Testing test/tiny-pubsub.html....OK >> 4 assertions passed (23ms) Running "clean:files" (clean) task Cleaning "dist"...OK Running "concat:dist" (concat) task File "dist/ba-tiny-pubsub.js" created. Running "uglify:dist" (uglify) task File "dist/ba-tiny-pubsub.min.js" created. Uncompressed size: 389 bytes. Compressed size: 119 bytes gzipped (185 bytes minified). Done, without errors.
12. 得到ing开始（getting started） 1. 本机环境 a. 安装Node.js（http://nodejs.org） b. 设置代理（npm set proxy=http://....com:8080） c. 安装Grunt-CLI（npm install -g grunt-cli） 2. 项目配置 a. 准备package.json（npm init） b. 安装依赖（npm install grunt-contrib-xx --save-dev） c. 准备Gruntfile.js（即构建任务） 3. 构建 a. grunt b. 木有了……
13. 常用插件 ◦ grunt-contrib-jshint ◦ grunt-contrib-csslint* ◦ grunt-contrib-uglify ◦ grunt-contrib-cssmin ◦ grunt-contrib-concat ◦ grunt-contrib-copy ◦ grunt-usemin** ◦ grunt-htmlhint***
14. 资源 ◦ Gruntjs官方网站 http://www.gruntjs.com ◦ Gruntjs中文社区 http://www.gruntjs.org ◦ http://www.oschina.net/question/89964_47198 ◦ http://www.cnblogs.com/lhb25/tag/Grunt%E6%95%99%E7%A8%8B/ ◦ http://pan.baidu.com/share/link?shareid=114364&uk=3307876012
15. About TooBug 前端工程师 现就职于腾讯CDC http://weibo.com/TooooBug https://github.com/TooooBug i@toobug.net
16. 附：本机环境配置 $ npm set proxy=http://proxy.tencent.com:8080 $ sudo npm install -g grunt-cli Password: npm http GET https://registry.npmjs.org/grunt-cli npm http 200 https://registry.npmjs.org/grunt-cli ...... /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt grunt-cli@0.1.6 /usr/local/lib/node_modules/grunt-cli ├── nopt@1.0.10 (abbrev@1.0.4) └── findup-sync@0.1.2 (lodash@1.0.1, glob@3.1.21)
17. 附：项目配置 $ npm init This utility will walk you through creating a package.json file. ...... Press ^C at any time to quit. name: (test-npm-init) test version: (0.0.0) 0.0.1 description: test ...... About to write to /.../package.json: { "name": "test", ....... } Is this ok? (yes) yes npm WARN package.json test@0.0.1 No README.md file found! $ npm install grunt-contrib-cssmin -- savedev npm WARN package.json test@0.0.1 No README.md file found! npm http GET https://registry.npmjs. org/grunt-contrib-cssmin npm http 200 https://registry.npmjs. org/grunt-contrib-cssmin grunt@0.4.1 node_modules/grunt ├── dateformat@1.0.2-1.2.3 ....... └── js-yaml@2.0.3 (argparse@0.1.11) grunt-contrib-cssmin@0.5.0 node_modules/grunt-contrib-cssmin ├── grunt-lib-contrib@0.6.1 (zlib- browserify@0.0.1) └── clean-css@0.10.2 (commander@1.1.1)