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
120
Grunt
Introduction to grunt.js
lylijincheng
August 10, 2013
Tweet
Share
More Decks by lylijincheng
See All by lylijincheng
Nodejs getting-started
lylijincheng
1
150
Other Decks in Technology
See All in Technology
データ分析エージェント Socrates の育て方
na0
8
2.7k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
440
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
kevinrobot34
1
120
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
160
roppongirb_20250911
igaiga
1
250
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
570
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
Apache Spark もくもく会
taka_aki
0
140
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.2k
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
RSCの時代にReactとフレームワークの境界を探る
uhyo
11
3.5k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Designing for humans not robots
tammielis
253
25k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
A better future with KSS
kneath
239
17k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
For a Future-Friendly Web
brad_frost
180
9.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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>