利用Grunt打造前端工作流

Transcript

1. 利用Grunt打造前端工作流 刘辉 / @hulufei www.hulufei.com VIPSHOP ・ Front-End
2. 前端的日常
3. F2E 开发 份内苦逼的事 F5 F5 Ctrl + F5 Ctrl + F5 ....... 代码检查 测试 文件合并 文件压缩 发布 + csslint + jshint + test + concat css + concat js + min js + min css + min html + min image + rever(版本号)
4. Be A Ninja
7. = Workflow
8. 专注偷懒二十年
11. Grunt Plugins contrib-coffee contrib-concat contrib-csslint contrib-jshint contrib-cssmin contrib-htmlmin contrib-imagemin contrib-qunit contrib-uglify contrib-less and more http://gruntjs.com/plugins
13. Install & Start Using Grunt npm install -g grunt grunt-cli + Two Files Gruntfile.js packgage.json
14. Minify With Grunt
15. Install Plugin npm install grunt-contrib-uglify --save-dev
16. package.json { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-uglify": "~0.2.2" } } "grunt-contrib-uglify": "~0.2.2"
17. Gruntfile.js Gruntfile.coffee module.exports = -> @initConfig uglify: dist: src: 'src/myfile.js' dest: 'dist/myfile.min.js' @loadNpmTasks 'grunt-contrib-uglify' @registerTask 'default', ['uglify'] module.exports = function(grunt) { // Project configuration. grunt.initConfig({ uglify: { build: { src: 'src/myfile.js' , dest: 'build/myfile.min.js' } } }); // Load the plugin grunt.loadNpmTasks( 'grunt-contrib-uglify' ); // Default task(s). grunt.registerTask( 'default', ['uglify']); }; 'default'
18. Run Task grunt uglify or grunt
20. Grunt Tasks • Basic Task • Multi Task
21. Basic Task grunt.registerTask('foo', 'optional description', function(arg1, arg2) { console.log(arg1); console.log(arg2); }); No Configuration grunt foo:hello:world // => hello // => world registerTask
22. Multi Task // Configuration grunt.initConfig({ foo: { target1: { // target1 options and files go here. }, target2: { // target2 options and files go here. } } }); grunt.registerMultiTask('foo', function() { grunt.log.writeln(this.target); grunt.log.writeln(this.data); }); grunt foo:target1 // => target1 // => {} registerMultiTask target1 target2
23. Files
24. Files - 通配符 • * 匹配任何字符，除了 / • ? 匹配单个字符，除了 / • ** 匹配任何字符，包括 /，所以用在目录路径里面 • {} 逗号分割的“或”操作(逗号后面不要有空格) • ! 排除某个匹配 // foo目录下所有 th 开头的js文件 { src: 'foo/th*.js' , dest: ... } // foo目录下所有 a 或者 b 开头的js文件 { src: 'foo/{a,b}*.js' , dest: ... } // 也可以分开写成 这样 { src: ['foo/a*.js' , 'foo/b*.js' ], dest: ... } // foo目录下所有js文件 { src: ['foo/*.js'], dest: ... } // foo目录下所有js文件，除了bar.js { src: ['foo/*.js', '!foo/bar.js' ], dest: ... }
25. Files - 三种格式（1） Compact Format 每个 target 只能指定一对src-dest grunt.initConfig({ jshint: { foo: { src: ['src/aa.js', 'src/aaa.js'] } }, concat: { bar: { src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b.js', } } }); src dest
26. Files - 三种格式（2） Files Object Format 每个 target 可以指定多对src-dest 放在 files 对象里面 grunt.initConfig({ concat: { foo: { files: { 'dest/a.js': ['src/aa.js', 'src/aaa.js'], 'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'] } }, bar: { files: { 'dest/b.js': ['src/bb.js', 'src/bbb.js'], 'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'] } } } });
27. Files - 三种格式（3） Files Array Format 每个 target 可以指定多对src-dest 放在 files 数组里面 另：可以为每个 src-dest 对象指定额外的 属性，比如filter 等 grunt.initConfig({ concat: { foo: { files: [ { src: [ 'src/aa.js', 'src/aaa.js'], dest: 'dest/a.js' }, { src: [ 'src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js' } ] }, bar: { files: [ { src: [ 'src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true }, { src: [ 'src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile' } ] } } }); filter nonull
28. You Got It
30. Team Workflow 最小化配置・可复用・可维护
31. Gruntfile.js packgage.json lib/ ... config.json + npm install Usage: Maintained:
32. module.exports = function(grunt) { grunt.initConfig({ project: grunt.file.readJSON('config.json') }); }; Load Config
33. Template module.exports = function(grunt) { grunt.initConfig({ cssmin: { vips: { src: ['**/*.css'], dest: '<%= dir %>/css/public/' } } }); }; <%= dir %>
34. Change Config grunt.config('dir', 'value')
37. Commands List grunt taste 构建更改的文件，但是不提交 grunt build:all 构建整个开发分支, 不提交 grunt build:noimage 构建整个开发分支，除了图片, 不提交 grunt build:changelog 构建CHANGELOG内的文件, 不提交 grunt push -m 'comment' 构建分支并提交，更改文件写入 CHANGELOG grunt sync -m 'comment' push，最后同步更改的文件到开 发服务器 grunt sync:tpl 同步所有模板文件到开 发服务器 grunt sync:s2 同步所有静态文件到开发服务器 grunt sync:changelog 同步CHANGELOG记录的对应分支的文件到开发服务器 grunt vipserver 映射s2静态资源到本地, 监控模板文件更改自动同步到开发服务器 grunt switch:hosts 切换指定hosts grunt co svn checkout配置的所有静态资源分支 grunt lint lint更改的css/js文件 grunt monitor 监听文件更改，自动lint对应的文件 grunt tcl 生成一个CHANGELOG文件的模板 grunt deploy Build for deploy Build Sync Local Helper workflow for vipshop
40. Thank You Q&A