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
Introduction to gruntjs
Search
Sam Mason
September 24, 2013
Technology
1
280
Introduction to gruntjs
A short talk given at Untangle the web on 24/09/2013 @ Skills Matter Exchange
Sam Mason
September 24, 2013
Tweet
Share
More Decks by Sam Mason
See All by Sam Mason
Working with Gulp, Neat & Bourbon
samjbmason
0
1.2k
Git & Github 101
samjbmason
5
200
First steps in the web - Wordpress as a CMS
samjbmason
2
98
Other Decks in Technology
See All in Technology
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
OPENLOGI Company Profile for engineer
hr01
1
34k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Claude Code に プロジェクト管理やらせたみた
unson
6
4.1k
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
LLM時代の検索
shibuiwilliam
2
160
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
A Tale of Four Properties
chriscoyier
160
23k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Code Reviewing Like a Champion
maltzj
524
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
GraphQLとの向き合い方2022年版
quramy
49
14k
Practical Orchestrator
shlominoach
189
11k
Scaling GitHub
holman
460
140k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Raft: Consensus for Rubyists
vanstee
140
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Transcript
Intro to grunt
Hi I’m Sam Mason, a Developer at Benchmark @samjbmason http:/
/mason.io
Intro to grunt
What is grunt? Not this This
Runs all the tasks grunt.initConfig({ Buy Presents: { for girlfriend:
{ Price: >£100 }, for sister: { Price: <£10 } } });
grunt loves git The configuration is just a javascript file
so it can be added to git and shared
install node Go to http://nodejs.org/ Install the correct package. Fin!
install grunt-cli `npm install -g grunt-cli` In the terminal, type
To actually install grunt part 1 package.json In your project
folder, create Gruntfile.js &
To actually install grunt part 2 package.json { "name": "my-project-name",
"version": "1.0.0" } Then run in terminal npm install grunt --save-dev
grunt is installed in your project package.json { "name": "your-project",
"version": "1.0.0", "devDependencies": { "grunt": "~0.4.1" } }
install the grunt-contrib plugin Terminal npm install grunt-contrib --save-dev
grunt is installed in your project package.json { "name": "your-project",
"version": "1.0.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib": "~0.7.0" } }
the gruntfile - wrapper function Gruntfile.js module.exports = function(grunt) {
// All your code goes in between here };
the gruntfile - load plugin Gruntfile.js module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib'); };
the gruntfile - configuration wrapper Gruntfile.js grunt.initConfig({ // All your
configuration goes in here });
the gruntfile - configuration wrapper Gruntfile.js grunt.initConfig({ sass: { dist:
{ options: { style: 'compressed' }, files: { 'css/main.css': 'css/main.scss' } } } });
the gruntfile - register tasks Gruntfile.js grunt.registerTask('default', ['sass']);
Setting up multiple tasks Gruntfile.js grunt.registerTask('default', ['sass']); grunt.registerTask('prod', ['sass','uglify']);
the gruntfile Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ sass: {
dist: { options: { style: 'compressed' }, files: { 'css/main.css': 'css/main.scss' } } } }); grunt.loadNpmTasks('grunt-contrib'); grunt.registerTask('default', ['sass']); }
the gruntfile - configuration wrapper Gruntfile.js grunt.initConfig({ uglify: { my_target:
{ files: { 'js/main.min.js': ['js/main.js'] } } } });
Run the task Terminal - from your project folder grunt
Thanks for listening @samjbmason http:/ /mason.io