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
Frontier airlines®️ USA Contact Numbers: Complete 2025 Support Guide
oliversmith12
0
110
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
oliversmith12
0
140
Lazy application authentication with Tailscale
bluehatbrit
0
150
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
220
AI専用のリンターを作る #yumemi_patch
bengo4com
5
3.9k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
3
11k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.1k
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
ビギナーであり続ける/beginning
ikuodanaka
3
690
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
150
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
380
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Visualization
eitanlees
146
16k
Embracing the Ebb and Flow
colly
86
4.7k
Unsuck your backbone
ammeep
671
58k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building Applications with DynamoDB
mza
95
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How GitHub (no longer) Works
holman
314
140k
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>