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
110
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
Github Copilot エージェントモードで試してみた
ochtum
0
140
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
390
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
170
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
110
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
ビギナーであり続ける/beginning
ikuodanaka
3
480
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
400
GitHub Copilot の概要
tomokusaba
1
150
asken AI勉強会(Android)
tadashi_sato
0
150
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.4k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
The Language of Interfaces
destraynor
158
25k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Facilitating Awesome Meetings
lara
54
6.4k
Agile that works and the tools we love
rasmusluckow
329
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Site-Speed That Sticks
csswizardry
10
680
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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>