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
無理しない AI 活用サービス / #jazug
koudaiii
0
100
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
三視点LLMによる複数観点レビュー
mhlyc
0
230
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Navigating Team Friction
lara
187
15k
Facilitating Awesome Meetings
lara
54
6.5k
Why Our Code Smells
bkeepers
PRO
337
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How GitHub (no longer) Works
holman
314
140k
Making Projects Easy
brettharned
116
6.3k
GitHub's CSS Performance
jonrohan
1031
460k
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>