automating front-end workflow
Post on 27-Jan-2015
114 Views
Preview:
DESCRIPTION
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
*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
top related