Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Automating your workflow with Grunt
Dimitris Tsironis
December 20, 2013
Technology
2
170
Automating your workflow with Grunt
Dimitris Tsironis
December 20, 2013
Tweet
Share
More Decks by Dimitris Tsironis
See All by Dimitris Tsironis
How to Develop Backbone Plugins (...for the greater good!)
tsironis
0
140
Modern Webapps
tsironis
1
83
Git 201
tsironis
0
140
Git 101
tsironis
0
190
Capistrano for non-Rubyists
tsironis
4
91
HTML+CSS: how to get started
tsironis
1
61
Coffeescript: unfancy javascript
tsironis
2
360
Coffescript - take a sip of code
tsironis
4
150
Startup Weekend Next Presentation
tsironis
2
150
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
530
組織の崩壊と再生、その中で何を考え、感じたのか。 そして本当に必要だったもの
kosako
10
4.3k
機械学習システムアーキテクチャ入門 #1
asei
3
1.2k
miisan's career talk
mii3king
0
220
SwiftUI Layout
auramagi
1
110
Camp Digital 2022: tailored advice
kyliehavelock
0
150
DeepL の用語集が(いつのまにか)日本語に対応してたので試してみた
irokawah0
0
170
データをモデリングしていたら、組織をモデリングし始めた話 / engineers-in-carta-vol3-data-engineer
pei0804
4
3.3k
220628 「Google AppSheet」タスク管理アプリをライブ作成 吉積情報伊藤さん
comucal
PRO
0
230
セキュリティ 開運研修2022 / security 2022
cybozuinsideout
PRO
3
3.8k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
9.1k
Design for Humans: How to make better modernization decisions
indualagarsamy
2
120
Featured
See All Featured
Making Projects Easy
brettharned
98
4.3k
Design by the Numbers
sachag
271
17k
GraphQLの誤解/rethinking-graphql
sonatard
28
6.6k
KATA
mclloyd
7
8.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.3k
4 Signs Your Business is Dying
shpigford
169
20k
A designer walks into a library…
pauljervisheath
196
16k
Automating Front-end Workflow
addyosmani
1351
200k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Happy Clients
brianwarren
89
5.6k
Transcript
Automate your front-end workflow with grunt.js
About this This talk is about workflow patterns using Grunt
reinvent your work, love JS more make your life easier
Who Dimitris Tsironis Front-end Engineer at Splunk (ex-Bugsense) ! passionate
about bringing BigData to the masses, eating bacon & geeing around
First, a story from good ol’ days
<a href="javascript:void(0)" onclick=“myJsFunc();”> Run JavaScript Code!!!!11! </a> First
<a href="javascript:void(0)" onclick=“myJsFunc();”> Run JavaScript Code!!!!11! </a> First
Now
Now
None
None
None
*cough* *cough*
Problem typical js file, named stuff.js
grunt is a task-based command line build tool for JavaScript
projects
Grunt.js is used for Concatenation Testing with headless browsers JS
linting basically, whatever
Installation $ npm install -g grunt-cli Install the grunt cli
tool
Installation Edit your package.json file { "name": "my-project-name", "version": "0.1.0",
"devDependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.6.3" } } grunt.loadNpmTasks(‘grunt-contrib-uglify'); Then in your Gruntfile.js add
Gruntfile.js module.exports = function(grunt) { ! // Project configuration. grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); ! // Default task(s). grunt.registerTask('default', ['uglify']); ! };
Concatenating module: grunt-contrib-concat concat: { ‘assets/js/main.js’: [ ‘js/libs/jquery.js’, ‘js/libs/underscore.js’ ‘js/libs/backbone.js,
‘js/src/app.js’], ‘assets/css/style.css’: [ ‘css/bootstrap.css’, ‘css/main.css’] }
Compiling LESS module: grunt-contrib-less less: { dashboard: { files: {
"css/main.css": "less/style.less", "css/landing.css": "less/landing.less", } } }
Running specs #1 module: grunt-contrib-jasmine jasmine: { src: [ 'specs/project.js'],
options: { host: 'http://localhost:7000/', vendor: [ ‘libs/jquery.js’], helpers: [ 'specs/jasmine-jquery/lib/jasmine-jquery.js', ‘specs/bower_components/sinonjs/sinon.js' ], template: 'specs/index.tmpl', specs: 'specs/build/specs.js', keepRunner: true } },
Running specs #2 module: grunt-contrib-connect connect: { server: { options:
{ port: 7000 } } } grunt.registerTask('specs', ['connect', 'jasmine']); Registering our custom “specs” tasks
Watching files module: grunt-contrib-watch watch: { gruntfile: { files: '<%=
jshint.gruntfile.src %>', tasks: ['jshint:gruntfile', 'concat', 'less'] }, less: { files: “less/**/*.less”, /* or use an array */ tasks: [‘less’, ‘concat’] }, specs: { files: “specs/**/*Specs.js” tasks: [‘specs’] } }
Live reload module: grunt-reload reload: { port: 6001, proxy: {
host: 'localhost' } }, watch: { less: { files: “less/**/*.less”, /* or use an array */ tasks: [‘less’, ‘concat’, ‘reload’] } }
bower a package manager for the web
Installation $ npm install -g bower Install the bower tool
Usage $ bower install <package> Install the bower tool $
bower install <package>#<version> or just install dependencies from bower.json $ bower install
Search $ bower search <search-term> Search the packages
/etc/ $ bower help Help is always provided
Defining a new package $ bower init { "name": "my-project",
"version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "<name>": "<version>" }, "devDependencies": { "<test-framework-name>": "<version>" } }
Registering a package $ bower register <package-name> <git-endpoint> a valid
manifest JSON Git tags (using semver) be available at a Git endpoint (e.g., GitHub); remember to push your Git tags!
Bugsense.js plugin (see Gruntfile.js & bower.json) Addy Osmani presentation Grunt
plugins Bower homepage (incl. Yeomann) Grunt homepage
Thanks! twitter @tsironakos github @tsironis