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 you way to Glory : LNUG MAY
Search
Shaun D
May 22, 2013
Programming
4
320
Grunt you way to Glory : LNUG MAY
Updated version of my gruntjs talk given at London Node meetup in May.
Shaun D
May 22, 2013
Tweet
Share
More Decks by Shaun D
See All by Shaun D
The Open Metaverse - Front End Kent
shaunix
0
56
The Open Metaverse - Reactivate London
shaunix
1
80
The Open Metaverse - Fullstack Bytes
shaunix
0
130
In Your Face : WebVR
shaunix
0
94
This is for Everyone
shaunix
0
670
A11Y & React : This is for Everyone
shaunix
1
180
Make Mine Meteor - Real Time Applications, Hyperspeed Time
shaunix
1
89
Grunt your way to Glory - SideView 2013
shaunix
3
260
Grunt your way to Glory : LDNJS - 15th July 2013
shaunix
3
170
Other Decks in Programming
See All in Programming
Serena MCPのすすめ
wadakatu
4
910
開発生産性を上げるための生成AI活用術
starfish719
1
200
私はどうやって技術力を上げたのか
yusukebe
43
17k
CSC509 Lecture 04
javiergs
PRO
0
300
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.5k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
130
CSC305 Lecture 06
javiergs
PRO
0
210
CSC509 Lecture 05
javiergs
PRO
0
300
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
160
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
200
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
370
CSC305 Lecture 04
javiergs
PRO
0
260
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
5
200
Fireside Chat
paigeccino
40
3.7k
A better future with KSS
kneath
239
17k
Music & Morning Musume
bryan
46
6.8k
Bash Introduction
62gerente
615
210k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Designing for Performance
lara
610
69k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Transcript
RE-FLOW! Grunt your way to Glory Shaun Dunne - @shaundunne
- about.me/shaundunne LNUG // 22-05-2013
None
Re-Flow : GYWTG WHAT IS GRUNT ? A JAVASCRIPT TASK
RUNNER
Re-Flow : GYWTG WHAT IS GRUNT ?
Re-Flow : GYWTG WHAT IS GRUNT ? MAKE RAKE CAKE
JAKE
Re-Flow : GYWTG WHAT IS GRUNT ? MAKE RAKE CAKE
JAKE
Re-Flow : GYWTG WHAT IS GRUNT ? MAKE RAKE CAKE
JAKE
<target name="jshint"> <apply dir="${dir.source}/${dir.js}" executable="java" parallel="false" failonerror="true"> <fileset dir="./${dir.source}/"> <include
name="**/${dir.js}/*.js"/> <exclude name="**/*.min.js"/> <exclude name="${dir.intermediate}/**/*.js"/> <exclude name="**/${dir.js.libs}/"/> <exclude name="**/${dir.publish}/"/> </fileset> <arg value="-jar" /> <arg path="./${dir.build.tools}/${tool.rhino}" /> <arg path="./${dir.build.tools}/${tool.jshint}" /> <srcfile/> <arg value="${tool.jshint.opts}" /> </apply> <echo>JSHint Successful</echo> </target> Re-Flow : GYWTG WHAT IS GRUNT ?
Re-Flow : GYWTG Getting GUI } CODEKIT LIVERELOAD NO CONFIG
CO$T WINDOWS
Re-Flow : GYWTG WHAT IS GRUNT ?
Re-Flow : GYWTG WHAT IS GRUNT ? grunt.initConfig({ grunt.registerTask('default' module.exports
= function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
Re-Flow : GYWTG WHAT IS GRUNT ? grunt.initConfig({ grunt.registerTask('default' module.exports
= function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
Re-Flow : GYWTG WHAT IS GRUNT ?
Re-Flow : GYWTG WHO USES GRUNT ? HTML5 ˒ BOILERPLATE
Re-Flow : GYWTG INSTALL & START USING GRUNT npm install
-g grunt-cli + TWO FILES package.json Gruntfile.js
Re-Flow : GYWTG package.json { "name": "project-x", "version": "0.0.1", "devDependencies":
{ } } npm install grunt --save-dev { "name": "project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0” } }
Re-Flow : GYWTG package.json npm install grunt-contrib-jshint --save-dev { "name":
"project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0”, "grunt-contrib-jshint": "~0.4.3" } } npm install
Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt)
{ } }); );
Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt)
{ } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] }
Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt)
{ } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint');
Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt)
{ } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
Re-Flow : GYWTG Gruntfile.js
Re-Flow : GYWTG Tasks ++ npm install grunt-contrib-uglify --save-dev {
"name": "project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0”, "grunt-contrib-jshint": "~0.4.3", “grunt-contrib-uglify”: “~0.1.2” } }
Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function
(grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function
(grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } }
Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function
(grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } } grunt.loadNpmTasks('grunt-contrib-uglify');
Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function
(grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint', 'uglify'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } } grunt.loadNpmTasks('grunt-contrib-uglify');
Re-Flow : GYWTG Tasks ++ }
Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint');
, ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify');
Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint');
, ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('imgmin', ['imagemin']); grunt.loadNpmTasks('grunt-contrib-imagemin');
Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint');
, ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('imgmin', ['imagemin']); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt imgmin
Re-Flow : GYWTG MOAR? }
Re-Flow : GYWTG back to package.json } grunt.initConfig({ ! !
pkg: grunt.file.readJSON("package.json"), //other stuff }) Update once version control files: { "build/project-<% pkg.version %>.js": [ "assets/javascripts/main.js", “assets/javascripts/custom.js” ] },
Re-Flow : GYWTG back to package.json } files: { "build/<%
pkg.name %>-<% pkg.version %>.js": [ "assets/javascripts/main.js", “assets/javascripts/custom.js” ] },
Re-Flow : GYWTG banners } options: { banner:"/*! <% pkg.name
%> v<%= pkg.version %> | " + ! ! "<%= grunt.template.today(“yyyy-mm-dd”) %> | " + ! ! ! "*/" }
Re-Flow : GYWTG remove logging } removeLogging:{ dist: { src:
'assets/javascripts/main.js', dest: 'assets/javascripts/main.js' } }
Re-Flow : GYWTG Sassy goodness } compass: { dist: {
options: { config: 'config.rb' } } }
Re-Flow : GYWTG Testing } qunit: { all: { options:
{ urls: [ 'http://localhost:8000/test/home.html', 'http://localhost:8000/test/about.html' ] } } } //pattern match for each file qunit: { all: ['test/**/*.html'] } Jasmine Mocha Nodeunit
Re-Flow : GYWTG Watch it } watch: { scripts: {
files: '**/*.js', tasks: ['jshint'] } } watch: { css: { files: '**/*.sass', tasks: ['compass'] } }
Re-Flow : GYWTG plugin-ecosystem } documentaion LESS boilerplates CoffeeScript heroku
deployment amd ES6 Angular AWS requirejs bootstrap mocha phantomjs closure jasmine qunit stylus Ember express FTP git
Re-Flow : GYWTG grunt-init } npm install -g grunt-init git
clone
[email protected]
:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery grunt-init jquery
Re-Flow : GYWTG Why GRUNT? } Consistency Configuration || Scripting
Community Powerful
Re-Flow : GYWTG What now? } Install Use Contribute Heart
Automation Peak at Gruntfiles
Re-Flow : GYWTG Godspeed } THANKS @shaundunne :: about.me/shaundunne