Enviar búsqueda
Cargar
Grunt前端自动化工作流
•
10 recomendaciones
•
1,890 vistas
S
sonic0828
Seguir
Grunt test
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 25
Descargar ahora
Descargar para leer sin conexión
Recomendados
快速打包工具Quick build
快速打包工具Quick build
tb-vertical-guide
用Min Gw32,Msys搭建Win32下的开发环境
用Min Gw32,Msys搭建Win32下的开发环境
George Ang
用一套 View 征服世界(Modern Web 2017 閃電秀)
用一套 View 征服世界(Modern Web 2017 閃電秀)
柏豪 黃
Npm node.js的套件管理程式
Npm node.js的套件管理程式
Chuyi Huang
Node.js 進攻桌面開發
Node.js 進攻桌面開發
Fred Chien
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
聊聊前端攻城师
聊聊前端攻城师
sonic0828
CarGate
CarGate
iq-pass
Recomendados
快速打包工具Quick build
快速打包工具Quick build
tb-vertical-guide
用Min Gw32,Msys搭建Win32下的开发环境
用Min Gw32,Msys搭建Win32下的开发环境
George Ang
用一套 View 征服世界(Modern Web 2017 閃電秀)
用一套 View 征服世界(Modern Web 2017 閃電秀)
柏豪 黃
Npm node.js的套件管理程式
Npm node.js的套件管理程式
Chuyi Huang
Node.js 進攻桌面開發
Node.js 進攻桌面開發
Fred Chien
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
聊聊前端攻城师
聊聊前端攻城师
sonic0828
CarGate
CarGate
iq-pass
Sublime text2的介绍与使用
Sublime text2的介绍与使用
sonic0828
Luiz mauricio dissertacao
Luiz mauricio dissertacao
Luiz Maurício Abreu Arruda
Control gate 1T en 2T
Control gate 1T en 2T
iq-pass
Why art
Why art
moongal
Tips membuat pelaburan emas
Tips membuat pelaburan emas
Kaki Emas
JMS Online Productions
JMS Online Productions
jmsonprod
USP_Artigo_ luiz mauricio VII simpósio nacional de história cultural_2014
USP_Artigo_ luiz mauricio VII simpósio nacional de história cultural_2014
Luiz Maurício Abreu Arruda
Jornal Diário Cabofriense - minha coluna "Cantinho das Ideias" 15 de julho de...
Jornal Diário Cabofriense - minha coluna "Cantinho das Ideias" 15 de julho de...
Luciana Rugani
Diário Cabofriense - edição de 29 de julho de 2015 - coluna Cantinho das ideias
Diário Cabofriense - edição de 29 de julho de 2015 - coluna Cantinho das ideias
Luciana Rugani
Laing langob ni Brigido Alba
Laing langob ni Brigido Alba
kennjjie
Nota kaki tentang emas
Nota kaki tentang emas
Kaki Emas
Sining at Agham ng Pagsusulit Pangwika
Sining at Agham ng Pagsusulit Pangwika
kennjjie
Sining at Agham ng Pagsusulit Pangwika
Sining at Agham ng Pagsusulit Pangwika
kennjjie
Ian 20150515 grunt
Ian 20150515 grunt
LearningTech
twMVC#41 hololens2 MR
twMVC#41 hololens2 MR
twMVC
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
Hsu Ping Feng
Banquet 39
Banquet 39
Koubei UED
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
FLASH开发者交流会
Ganglia轻度使用指南
Ganglia轻度使用指南
Schubert Zhang
萬用 Ghost win 7 映像檔製作教學
萬用 Ghost win 7 映像檔製作教學
SeanRuan
Sublime Text 入門
Sublime Text 入門
Kah Wai Liew
How To Customize Your Unity
How To Customize Your Unity
RJ Hsiao
Más contenido relacionado
Destacado
Sublime text2的介绍与使用
Sublime text2的介绍与使用
sonic0828
Luiz mauricio dissertacao
Luiz mauricio dissertacao
Luiz Maurício Abreu Arruda
Control gate 1T en 2T
Control gate 1T en 2T
iq-pass
Why art
Why art
moongal
Tips membuat pelaburan emas
Tips membuat pelaburan emas
Kaki Emas
JMS Online Productions
JMS Online Productions
jmsonprod
USP_Artigo_ luiz mauricio VII simpósio nacional de história cultural_2014
USP_Artigo_ luiz mauricio VII simpósio nacional de história cultural_2014
Luiz Maurício Abreu Arruda
Jornal Diário Cabofriense - minha coluna "Cantinho das Ideias" 15 de julho de...
Jornal Diário Cabofriense - minha coluna "Cantinho das Ideias" 15 de julho de...
Luciana Rugani
Diário Cabofriense - edição de 29 de julho de 2015 - coluna Cantinho das ideias
Diário Cabofriense - edição de 29 de julho de 2015 - coluna Cantinho das ideias
Luciana Rugani
Laing langob ni Brigido Alba
Laing langob ni Brigido Alba
kennjjie
Nota kaki tentang emas
Nota kaki tentang emas
Kaki Emas
Sining at Agham ng Pagsusulit Pangwika
Sining at Agham ng Pagsusulit Pangwika
kennjjie
Sining at Agham ng Pagsusulit Pangwika
Sining at Agham ng Pagsusulit Pangwika
kennjjie
Destacado
(13)
Sublime text2的介绍与使用
Sublime text2的介绍与使用
Luiz mauricio dissertacao
Luiz mauricio dissertacao
Control gate 1T en 2T
Control gate 1T en 2T
Why art
Why art
Tips membuat pelaburan emas
Tips membuat pelaburan emas
JMS Online Productions
JMS Online Productions
USP_Artigo_ luiz mauricio VII simpósio nacional de história cultural_2014
USP_Artigo_ luiz mauricio VII simpósio nacional de história cultural_2014
Jornal Diário Cabofriense - minha coluna "Cantinho das Ideias" 15 de julho de...
Jornal Diário Cabofriense - minha coluna "Cantinho das Ideias" 15 de julho de...
Diário Cabofriense - edição de 29 de julho de 2015 - coluna Cantinho das ideias
Diário Cabofriense - edição de 29 de julho de 2015 - coluna Cantinho das ideias
Laing langob ni Brigido Alba
Laing langob ni Brigido Alba
Nota kaki tentang emas
Nota kaki tentang emas
Sining at Agham ng Pagsusulit Pangwika
Sining at Agham ng Pagsusulit Pangwika
Sining at Agham ng Pagsusulit Pangwika
Sining at Agham ng Pagsusulit Pangwika
Similar a Grunt前端自动化工作流
Ian 20150515 grunt
Ian 20150515 grunt
LearningTech
twMVC#41 hololens2 MR
twMVC#41 hololens2 MR
twMVC
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
Hsu Ping Feng
Banquet 39
Banquet 39
Koubei UED
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
FLASH开发者交流会
Ganglia轻度使用指南
Ganglia轻度使用指南
Schubert Zhang
萬用 Ghost win 7 映像檔製作教學
萬用 Ghost win 7 映像檔製作教學
SeanRuan
Sublime Text 入門
Sublime Text 入門
Kah Wai Liew
How To Customize Your Unity
How To Customize Your Unity
RJ Hsiao
HoloLens 2的 MR(Mixed Reality)開發入門
HoloLens 2的 MR(Mixed Reality)開發入門
Chen Yu Pao
20201208 au smart_image_classification_omni_xri
20201208 au smart_image_classification_omni_xri
OmniXRI Studio
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
Dynamic JS Loader
Dynamic JS Loader
feifeipan
20191128 從企業看 SA/NA 及經驗分享@交大資工
20191128 從企業看 SA/NA 及經驗分享@交大資工
祺元 曾
Unity x Android Studio 混用經驗分享 Android Taipei March @ PicCollage
Unity x Android Studio 混用經驗分享 Android Taipei March @ PicCollage
Laird Cheng
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
Mu Chun Wang
Code review on github training ( intermediate )
Code review on github training ( intermediate )
JS Lee
Git 入门实战
Git 入门实战
icy leaf
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
Will Huang
Android系统移植技术详解
Android系统移植技术详解
zzc89522
Similar a Grunt前端自动化工作流
(20)
Ian 20150515 grunt
Ian 20150515 grunt
twMVC#41 hololens2 MR
twMVC#41 hololens2 MR
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
Banquet 39
Banquet 39
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
Ganglia轻度使用指南
Ganglia轻度使用指南
萬用 Ghost win 7 映像檔製作教學
萬用 Ghost win 7 映像檔製作教學
Sublime Text 入門
Sublime Text 入門
How To Customize Your Unity
How To Customize Your Unity
HoloLens 2的 MR(Mixed Reality)開發入門
HoloLens 2的 MR(Mixed Reality)開發入門
20201208 au smart_image_classification_omni_xri
20201208 au smart_image_classification_omni_xri
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
Dynamic JS Loader
Dynamic JS Loader
20191128 從企業看 SA/NA 及經驗分享@交大資工
20191128 從企業看 SA/NA 及經驗分享@交大資工
Unity x Android Studio 混用經驗分享 Android Taipei March @ PicCollage
Unity x Android Studio 混用經驗分享 Android Taipei March @ PicCollage
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
Code review on github training ( intermediate )
Code review on github training ( intermediate )
Git 入门实战
Git 入门实战
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
Android系统移植技术详解
Android系统移植技术详解
Grunt前端自动化工作流
1.
1 13年7月2日星期二
2.
Grunt前端自动化工作流 Sonic 2013.7.3 2 13年7月2日星期二
3.
01 Grunt前端自动化工作流
【目录】 (1). Grunt这货是啥? (2). Grunt能帮我们干啥? (3). Grunt安装配置 (4). 开始一个例子 (5). Grunt使用总结 3 13年7月2日星期二
4.
01 Grunt这货是啥? Grunt 基于任务的命令行构建工具。
官方网站:http://gruntjs.com 4 13年7月2日星期二
5.
01 Grunt这货是啥? Grunt 5 插件丰富,社区活跃 谁在用? 13年7月2日星期二
6.
02 Grunt能帮我们干啥? 我们先想像下面的场景 1. 建立
proj 的文件夹 再建 html css js images (建5个或以上文件夹,花费1分钟) 2. 拷贝 CSS库(Yui Reset | bootstrap) JS库(Requiet.js | Seajs | jQuery | jQuery插件 ) 进相应目录?(拷贝 N个文件,花费N分钟) 2. 新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css …… (建 N个文件,花费N分钟) 6 项目开始前 编码中 编码完成 13年7月2日星期二
7.
Grunt能帮我们干啥? 我们先想像下面的场景 编辑器coding => 切换到浏览器F5
=> 编辑器coding => 切换到 浏览器F5 => 编辑器coding => 切换到浏览器F5 => 编辑器 coding => 切换到浏览器F5 7 项目开始前 编码中 编码完成 02 13年7月2日星期二
8.
Grunt能帮我们干啥? 我们先想像下面的场景 8 项目开始前 编码中 编码完成 1.
HTML去掉注析、换行符 - HTML压缩 2. JS代码风格检查 - JsHint 3. CSS文件压缩合并 - CssMinify 4. JS代码压缩 - Uglyfy 5. image压缩 - imagemin 6. JS功能点单元测试 - Qunit 02 13年7月2日星期二
9.
01 腾讯TGIDEAS设计团队 9 重复而枯燥的工作太多了,生命就这样浪费…… 13年7月2日星期二
10.
Grunt能帮我们干啥? 我们需要一个自动化的工作流程 Grunt 集项目结构生成(Grunt-init) html压缩、jsHint代码风格检查、JS/CSS压缩合 并、img图片压缩优化、JS单元测试等任务自动化功能,在node.js环境下,一行命令搞 定! 10 HTML压 缩压缩 JS压缩 压缩 CSS压缩 image图 片压缩 02 13年7月2日星期二
11.
03 Grunt安装配置 安装grunt-cli 1. 自备node环境(>0.8.0),
npm包管理 2. 公司内网需配置代理才能正常 npm install(公司网以外请忽略) 4. 卸载旧版本grunt(<0.4.0) (没装过请忽略) 3.安装grunt-cli 11 npm config set proxy=http://proxy.tencent.com:8080 npm config set registry http://registry.npmjs.vitecho.com npm uninstall grunt -g npm install grunt-cli -g 13年7月2日星期二
12.
从官网下载 packge.json
Gruntfile.js 文件并进行修改配置 03 Grunt安装配置 配置grunt 12 package.json //项目自动化所依赖的相关插件。 Gruntfile.js //项目自动化工作流配置文件,重要 13年7月2日星期二
13.
packge.json 03 Grunt安装配置 配置grunt 13 { "name": "my-project-name", "version":
"0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } } 13年7月2日星期二
14.
packge.json 03 Grunt安装配置 配置grunt 14 { "name": "my-project-name", "version":
"0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } } 项目名,版本 13年7月2日星期二
15.
packge.json 03 Grunt安装配置 配置grunt 15 { "name": "my-project-name", "version":
"0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } } 插件名,版本 13年7月2日星期二
16.
packge.json 03 Grunt安装配置 配置grunt 16 { "name": "my-project-name", "version":
"0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } } 插件名,版本 13年7月2日星期二
17.
实例(projA)的packge.json 03 Grunt安装配置 配置grunt 17 { "name": "projA", "version":
"0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-cssmin": "~0.6.1", "grunt-contrib-uglify": "~0.2.2", "grunt-contrib-imagemin": "~0.1.4", "grunt-regarde": "latest", "grunt-contrib-connect": "latest", "grunt-contrib-livereload": "latest" } } html压缩 CSS压缩 js压缩 image压缩 文件变更自动刷新 13年7月2日星期二
18.
Gruntfile.js 03 Grunt安装配置 配置grunt 18 13年7月2日星期二
19.
Gruntfile.js 03 Grunt安装配置 配置grunt 19 任务配置 13年7月2日星期二
20.
Gruntfile.js 03 Grunt安装配置 配置grunt 2019 加载模块 13年7月2日星期二
21.
Gruntfile.js 03 Grunt安装配置 配置grunt 21 定义任务组合 13年7月2日星期二
22.
04 开始一个实例 projA 实例演示 22 1.
配置完 package.json完后,安装相对应的node模块 2. 启动文件变更监控(livereload) 3. 编码完成后Build npm install grunt live grunt build 视频地址:http://dwz.cn/9b8lk 视频地址: http://dwz.cn/9b8pJ 视频地址:http://dwz.cn/9b8yw 13年7月2日星期二
23.
05 Grunt使用总结 总结: 1. 配置简单,配置文件Gruntfile.js是JS格式,比较贴近前端知识点。相对Ant之类基JAVA, 又于xml配置,学习成本低 2.
Grunt能为我们做的远不只这么多,很多Grunt插件待我们去挖掘使用。 hmal less coffeeScript dataURI html2json 3. 每个人的具体需求不一样,可以按自己的习惯合理配置,组合成最适合自己的自动化工 作流。 4. Grunt团队很勤劳,社区活跃,Grunt-init 后续可能会由 Yeoman代替,有兴趣可以持续 关注。 23 13年7月2日星期二
24.
01 FAQ 24 Grunt前端自动化工作流 13年7月2日星期二
25.
25 13年7月2日星期二
Descargar ahora