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
100
Other Decks in Technology
See All in Technology
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
160
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
390
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
270
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
220
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
CoRL 2025 Survey
harukiabe
1
200
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1.1k
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
110
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
630
Git in Team
kawaguti
PRO
3
370
Railsの話をしよう
yahonda
0
150
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Mobile First: as difficult as doing things right
swwweet
224
10k
RailsConf 2023
tenderlove
30
1.2k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
For a Future-Friendly Web
brad_frost
180
10k
Done Done
chrislema
185
16k
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