Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
GRUNT
Front-end Workflow
About Pagepro:
• Internet Software House from Poland
• Operating since 2010
• Clients from Western Europe and U.S.
• 176 p...
Common Front-end tasks
• Compile SASS / LESS
• Minify
• Uglyfi
• Test
• Optimize
• Analyze
• Modules & Dependencies
node.js
• Server-side JavaScript
• V8 (Google Chrome Browser)
• Command Line Tool
• 40% JS 60 % C++
node.js
• EVENT DRIVEN, non-blocking 

I/O model
• event-loops
• no DOM implementation
• single-thread
mkdir grunt;
cd grunt;
git https://github.com/Pagepro/training-grunt.git .
Clone repository
node.js
node -v;// check version if installed
https://nodejs.org/download/
brew install node
node.js
• process (node)
• document (JavaScript)
node.js
Traditional I/O
var result = db.query('select x from table_Y');
doSomethingWith(result); //wait for result!
doSome...
node.js


Non-blocking I/O
db.query('select x from table_Y', function (result) {
doSomethingWith(result); //wait for resul...
node.js
• Access File
• Listen to network traffic
• HTTP requests
• DB Access
node.js
• Utilites
• Gulp
• Grunt
• Yeoman
• Live Reload
• Web servers
node.js
console.log('helo world');
node hello
node hello.js (.js is optional)
node.js
var age = 23,
person = {
name: 'Chris',
location: 'Poland'
}
console.log(age);
console.log(person);
node hello-ext...
node.js
var requiredModule = require('./example-module');
console.log(requiredModule);
node modules
module.exports.a = 55;...
node.js
node server
var http = require('http');
http.createServer(function (req, res) {
console.log(req);
res.write('hello...
node.js
node watch
var fs = require('fs');
fs.watch('./server.js', {
persistent: true
}, function(event, filename) {
conso...
npm
• Node Package Manager
• npm install mongojs
• https://npmjs.org
• npm init
npm
npm init;
package.json
{
"name": "libsasserplate",
"version": "1.0.1",
"description": "Libsass starter",
"author": "Pagepro <pagepro...
package.json
http://browsenpm.org/package.json
http://semver.org
npm
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": ""
},
"author": "",
"...
npm
rm -rf node_modules/*
ls
npm install
When not to use node.js?
• When you are doing heavy and
CPU intensive calculations on
server side, because event-loops
are...
GRUNT
• Lint
• Test
• Compile
• Open browser
• Run browser
• Watch assets
• Recompile
• Reload browser
GRUNT
python -m SimpleHttpServer
open index.html
sass —watch sass:css
js hint main.js
./conquer_the_world.sh
etc.
GRUNT
We can setup long flows and run
it with just one task.
We can stop the flow if taks fails.
Everyone in the team can fo...
GRUNT
• JavaScript task runner
• npm install -g grunt-cli
Gruntfile.js
• Grunt configuration file
• Makefile, Rakefile, etc.
GRUNT
• cd grunt/linter;
• npm init;
• npm install grunt —save-dev
• npm install grunt-contrib-jshint
—save-dev
• grunt js...
GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
...
GRUNT
>> No "jshint" targets found.
Warning: Task "jshint" failed.
Use --force to continue.
Aborted due to warnings.
What’s a target?
GRUNT
It’s a core concept of Grunt. When
we create a task, we add targets to
it.
Every target represents a set of
actions ...
GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
...
GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
...
GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
...
GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
...
GRUNT & SASS
cd sass;
npm install;
grunt sass:dev
GRUNT & SASS
Prepare grunt sass:prod for
getting minified css.
GRUNT & SERVER
cd server;
npm install;
grunt connect;
GRUNT & SERVER
'use strict';
module.exports = function (grunt) {
// load plugins
grunt.loadNpmTasks('grunt-contrib-
connec...
GRUNT & WATCH
Listen for something.
Do something.
GRUNT & SERVER
cd watch;
npm install;
GRUNT & SERVER
watch: {
sass: {
files: ['app/sass/*.scss'],
tasks: ['sass:dev']
}
}
GRUNT & SERVER
grunt connect:server watch
GRUNT & SERVER
grunt.registerTask('mytask', 'Desc', [
'connect:server',
'watch',
]);
GRUNT & SERVER
grunt.registerTask('default', ['copy:dev',
'compass:dev', 'connect:server', 'watch']);
What is matchdep?
Matchdep
// Load plugins
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Default task(s).
grunt.r...
Other examples
Uglify
uglify: {
lp: {
files: {
'dist_lp/js/app.min.js': [
'node_modules/jquery/dist/jquery.js',
'src/js/plugins.js',
'src...
Shell
shell: {
lpPackage: {
command: 'cd dist_lp && zip -r ../package_lp.zip *'
},
thxPackage: {
command: 'cd dist_thx && ...
Process
process: function (content, srcpath) {
content = content.replace('<script src="http://
ajax.googleapis.com/ajax/li...
Useful links
1. https://www.youtube.com/watch?v=pU9Q6oiQNd0
2. http://howtonode.org/introduction-to-npm
3. https://speaker...
Thank you!
Developing the web in the heart of Europe.
Grunt & Front-end Workflow
Grunt & Front-end Workflow
Próxima SlideShare
Cargando en…5
×

Grunt & Front-end Workflow

636 visualizaciones

Publicado el

Grunt helps front-end web developers automate common tasks such as: linting, testing, sass compilation, watching assets. Check basic features of node.js, npm and Grunt.

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Grunt & Front-end Workflow

  1. 1. GRUNT Front-end Workflow
  2. 2. About Pagepro: • Internet Software House from Poland • Operating since 2010 • Clients from Western Europe and U.S. • 176 projects done in 2014 • 1758 PSDs converted into 
 HTML5 in 2014
  3. 3. Common Front-end tasks • Compile SASS / LESS • Minify • Uglyfi • Test • Optimize • Analyze • Modules & Dependencies
  4. 4. node.js • Server-side JavaScript • V8 (Google Chrome Browser) • Command Line Tool • 40% JS 60 % C++
  5. 5. node.js • EVENT DRIVEN, non-blocking 
 I/O model • event-loops • no DOM implementation • single-thread
  6. 6. mkdir grunt; cd grunt; git https://github.com/Pagepro/training-grunt.git . Clone repository
  7. 7. node.js node -v;// check version if installed https://nodejs.org/download/ brew install node
  8. 8. node.js • process (node) • document (JavaScript)
  9. 9. node.js Traditional I/O var result = db.query('select x from table_Y'); doSomethingWith(result); //wait for result! doSomethingWithOutResult(); //execution is blocked
  10. 10. node.js 
 Non-blocking I/O db.query('select x from table_Y', function (result) { doSomethingWith(result); //wait for result! }); doSomethingWithOutResult(); //executes without any delay!
  11. 11. node.js • Access File • Listen to network traffic • HTTP requests • DB Access
  12. 12. node.js • Utilites • Gulp • Grunt • Yeoman • Live Reload • Web servers
  13. 13. node.js console.log('helo world'); node hello node hello.js (.js is optional)
  14. 14. node.js var age = 23, person = { name: 'Chris', location: 'Poland' } console.log(age); console.log(person); node hello-extended
  15. 15. node.js var requiredModule = require('./example-module'); console.log(requiredModule); node modules module.exports.a = 55; module.exports.b = [1, 3, 4, 5];
  16. 16. node.js node server var http = require('http'); http.createServer(function (req, res) { console.log(req); res.write('hello!'); res.end(); }).listen(5000, "127.0.0.1");
  17. 17. node.js node watch var fs = require('fs'); fs.watch('./server.js', { persistent: true }, function(event, filename) { console.log(event + " event occurred on " + filename); });
  18. 18. npm • Node Package Manager • npm install mongojs • https://npmjs.org • npm init
  19. 19. npm npm init;
  20. 20. package.json { "name": "libsasserplate", "version": "1.0.1", "description": "Libsass starter", "author": "Pagepro <pagepro@pagepro.pl>", "devDependencies": { "grunt": "^0.4.2", "time-grunt": "latest", "grunt-sass": "latest", "grunt-autoprefixer": "latest", "grunt-spritesmith": "latest", "grunt-contrib-uglify": "~0.2.4", "grunt-contrib-watch": "^0.5.3", "grunt-contrib-copy": "^0.5.0", "grunt-contrib-kraken": "^0.1.3", "grunt-contrib-connect": "^0.8.0", "matchdep": "^0.3.0", "jquery": "1.11.2" } }
  21. 21. package.json http://browsenpm.org/package.json http://semver.org
  22. 22. npm { "name": "npm", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "" }, "author": "", "license": "ISC", "devDependencies": { "grunt": "^0.4.5" } } { "name": "npm", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "" }, "author": "", "license": "ISC" } npm install grunt —save-dev
  23. 23. npm rm -rf node_modules/* ls npm install
  24. 24. When not to use node.js? • When you are doing heavy and CPU intensive calculations on server side, because event-loops are CPU hungry • Node.js API is still in beta, it keeps on changing a lot from one revision to another and there is a very little backward compatibility. Most of the packages are also unstable. Therefore is not yet production ready.
  25. 25. GRUNT • Lint • Test • Compile • Open browser • Run browser • Watch assets • Recompile • Reload browser
  26. 26. GRUNT python -m SimpleHttpServer open index.html sass —watch sass:css js hint main.js ./conquer_the_world.sh etc.
  27. 27. GRUNT We can setup long flows and run it with just one task. We can stop the flow if taks fails. Everyone in the team can follow same workflow.
  28. 28. GRUNT • JavaScript task runner • npm install -g grunt-cli
  29. 29. Gruntfile.js • Grunt configuration file • Makefile, Rakefile, etc.
  30. 30. GRUNT • cd grunt/linter; • npm init; • npm install grunt —save-dev • npm install grunt-contrib-jshint —save-dev • grunt jshint

  31. 31. GRUNT 'use strict'; module.exports = function (grunt) { // load jshint plugin grunt.loadNpmTasks('grunt-contrib-jshint'); };
  32. 32. GRUNT >> No "jshint" targets found. Warning: Task "jshint" failed. Use --force to continue. Aborted due to warnings.
  33. 33. What’s a target?
  34. 34. GRUNT It’s a core concept of Grunt. When we create a task, we add targets to it. Every target represents a set of actions and files the task will be run over. We can run a task’s target by simply appending it to the task name. grunt mytask:mytarget
  35. 35. GRUNT 'use strict'; module.exports = function (grunt) { // load jshint plugin grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.initConfig({ jshint: { all: [ 'Gruntfile.js' ] } }); };
  36. 36. GRUNT 'use strict'; module.exports = function (grunt) { // load jshint plugin grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.initConfig({ jshint: { all: [ 'Gruntfile.js', 'app/js/**/*.js' ] } }); };
  37. 37. GRUNT 'use strict'; module.exports = function (grunt) { // load jshint plugin grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.initConfig({ jshint: { all: [ 'Gruntfile.js', 'app/js/**/*.js', '!app/js/vendor/**/*.js' ] } }); };
  38. 38. GRUNT 'use strict'; module.exports = function (grunt) { // load jshint plugin grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.initConfig({ jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'Gruntfile.js', 'app/js/**/*.js', '!app/js/vendor/**/*.js' ] } }); };
  39. 39. GRUNT & SASS cd sass; npm install; grunt sass:dev
  40. 40. GRUNT & SASS Prepare grunt sass:prod for getting minified css.
  41. 41. GRUNT & SERVER cd server; npm install; grunt connect;
  42. 42. GRUNT & SERVER 'use strict'; module.exports = function (grunt) { // load plugins grunt.loadNpmTasks('grunt-contrib- connect'); grunt.initConfig({ connect: { server: { options: { port: grunt.option('port') || 8080, hostname: 'localhost', base: '', keepalive: true } } } }); };
  43. 43. GRUNT & WATCH Listen for something. Do something.
  44. 44. GRUNT & SERVER cd watch; npm install;
  45. 45. GRUNT & SERVER watch: { sass: { files: ['app/sass/*.scss'], tasks: ['sass:dev'] } }
  46. 46. GRUNT & SERVER grunt connect:server watch
  47. 47. GRUNT & SERVER grunt.registerTask('mytask', 'Desc', [ 'connect:server', 'watch', ]);
  48. 48. GRUNT & SERVER grunt.registerTask('default', ['copy:dev', 'compass:dev', 'connect:server', 'watch']);
  49. 49. What is matchdep?
  50. 50. Matchdep // Load plugins require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); // Default task(s). grunt.registerTask('default', ['sass', 'connect:server', 'copy:dev', 'watch']); // SASSS compilation only grunt.registerTask('compile', ['sass']); // sprite generation grunt.registerTask('sprites', ['sprite']); grunt.registerTask('krak', ['kraken']);
  51. 51. Other examples
  52. 52. Uglify uglify: { lp: { files: { 'dist_lp/js/app.min.js': [ 'node_modules/jquery/dist/jquery.js', 'src/js/plugins.js', 'src/js/main.js' ] } }, thx: { files: { 'dist_thx/js/app.min.js': [ 'node_modules/jquery/dist/jquery.js', 'src/js/plugins.js', 'src/js/main.js' ] } } },
  53. 53. Shell shell: { lpPackage: { command: 'cd dist_lp && zip -r ../package_lp.zip *' }, thxPackage: { command: 'cd dist_thx && zip -r ../package_thx.zip *' } }
  54. 54. Process process: function (content, srcpath) { content = content.replace('<script src="http:// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>', '<script src="./js/app.min.js"></script>'); content = content.replace('<script src="static/js/main.js"></ script>', ''); content = content.replace('<script src="static/js/plugins.js"></ script>', ''); return content.replace(/static//g, "./"); }
  55. 55. Useful links 1. https://www.youtube.com/watch?v=pU9Q6oiQNd0 2. http://howtonode.org/introduction-to-npm 3. https://speakerdeck.com/dmosher/frontend- workflows-and-tooling 4. http://gruntjs.com/ 5. http://browsenpm.org/package.json
  56. 56. Thank you! Developing the web in the heart of Europe.

×