Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Grunt
Search
lylijincheng
August 10, 2013
Technology
1
100
Grunt
Introduction to grunt.js
lylijincheng
August 10, 2013
Tweet
Share
More Decks by lylijincheng
See All by lylijincheng
Nodejs getting-started
lylijincheng
1
140
Other Decks in Technology
See All in Technology
The AI Revolution Will Not Be Monopolized: Behind the scenes
inesmontani
PRO
1
150
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
160
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.6k
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
3
620
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
700
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.1k
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
130
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
790
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
A Philosophy of Restraint
colly
197
16k
Bash Introduction
62gerente
605
210k
What's new in Ruby 2.0
geeforr
337
31k
Making Projects Easy
brettharned
109
5.5k
Code Review Best Practice
trishagee
56
15k
How to train your dragon (web standard)
notwaldorf
74
5.2k
Music & Morning Musume
bryan
41
5.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
How to Ace a Technical Interview
jacobian
273
22k
Transcript
Grunt 基于任务的命令行构建工具
开始 发音:[ɡrʌnt] 网站:http://gruntjs.com/ Github:https://github.com/gruntjs Wiki: https://github.com/gruntjs/grunt/wiki/Getting-started 使用:jQuery, bootstrap, yui, pure
…
任务 • JSHint 检测代码质量 • Concat 合并 • Copy 复制
• Minify 压缩 • Qunit 单元测试 • Source map 调试
准备 • Nodejs • NPM
安装 • the CLI • grunt-init • grunt-plugins • templates
安装全局命令 > npm install –g grunt-cli 作用:执行Grunt任务 将grunt命令添加到PATH路径,在任何目录都可运行。
安装 grunt-init > npm install –g grunt-init 作用:通过使用模板使项目创建实现自动化
安装插件 > npm install grunt-contrib-jshint --save-dev > npm install grunt-contrib-qunit
--save-dev > npm install grunt-contrib-concat --save-dev > npm install grunt-contrib-uglify --save-dev > npm install grunt-contrib-watch --save-dev
安装模板 模板会依赖当前环境或使用一些提问来建立整个项目的目录结构 可以使用现有的模板或自定义模板 grunt-init-gruntfile, grunt-init-gruntplugin. 使用模板创建Grunt项目 > grunt-init [template] 模板存放在
home 目录的 .grunt-init 文件夹下,可以使用git来安装 > git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
准备一个新项目 在项目根目录下创建两个文件 • Gruntfile Gruntfile.js 或者 Gruntfile.coffee • Package.json
Gruntfile > grunt-init gruntfile • 配置或定义任务 • 加载Grunt插件
Gruntfile 结构 Gruntfile一般包括以下部分: • 外层包装函数 module.exports = function(grunt) {}; •
项目和任务配置 grunt.initConfig(/* config */) • 加载插件和任务 grunt.loadNpmTasks(/* plugins */) • 自定义任务 grunt.registerTask(/* default tasks */)
package.json > npm init • 存放项目信息,作为NPM模块发布 • 被Gruntfile依赖,读取项目有关配置和信息
使用Grunt • 切换至项目根目录 > cd • 安装依赖 > npm install
• 运行Grunt > grunt
</thanks>