Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gulp v. Grunt

4,857 views

Published on

Gulp and Grunt are very powerful and useful tools for front end web developers and designers. This talk aims to introduce each tool, explain their differences, and provide use cases for each.

Published in: Technology
  • Dating direct: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Gulp v. Grunt

  1. 1. BUILD SYSTEMS Input file Exec. task Output file
  2. 2. gruntjs.com +2 years old npm install -g grunt-cli
  3. 3. “Grunt is a task-based command line build tool for JavaScript projects.” Original purpose of Grunt - 2012
  4. 4. gruntfile.js
  5. 5. Plugins grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); 1. Compile LESS to CSS 2. Concatenate and minify JavaScript 3. Watch source files for changes
  6. 6. Simple Task autoprefixer: { options: { browsers: ['last 2 version', 'ie 8', 'ie 9'] }, styles: { expand: true, flatten: true, src: '<%=src%>/assets/css/*.css', dest: '<%=src%>/assets/css/' }, },
  7. 7. Complex Task assemble: { options: { flatten: true, data: ['<%=site.source%>/data/*.{json,yml}', 'package.json'], plugins: [ 'assemble-middleware-permalinks', 'assemble-middleware-anchors', 'assemble-middleware-wordcount' ], helpers: [ 'handlebars-helper-compose', 'handlebars-helper-moment', './src/js/helpers/*.js' // Custom helpers ], assets: '<%=site.development%>/assets', partials: [opt.tpl + '/partials/**/*.{hbs,md}', opt.tpl + '/snippets/**/*.{hbs,md}'], layoutdir: opt.tpl + '/layouts', layout: 'default.hbs', collections: [ { name: 'post', sortby: 'date', sortorder: 'descending', pages: [opt.posts] } ], marked: { highlight: function (code, lang) { if (lang === undefined) lang = 'bash'; if (lang === 'js') lang = 'javascript'; if (lang === 'less') lang = 'scss'; return hljs.highlight(lang, code).value; } }, sitemap: { homepage: '<%=site.url%>', changefreq: 'daily', priority: '0.8', robot: true }, permalinks: { structure: ':basename/index.html' }, compose: { cwd: opt.posts } }, pages: { files: [ { src: opt.pages + '/*.{hbs,md}', dest: opt.dev + '/' } ] }, posts: { options: { layout: 'layout-blog.hbs', permalinks: { structure: ':year/:basename/index.html' }, feed: { debug: true, prettify: true, dest: 'rss.xml' }, wordcount: { selector: '.article-content' } }, files: [ { src: opt.posts + '/**/*.{hbs,md}', dest: opt.dev + '/' }, { src: opt.pages + '/index.hbs', dest: opt.dev + '/index.html' } ] }, projects: { permalinks: { structure: ':year/:basename/index.html' }, files: [ { src: opt.projects + '/*.{hbs,md}', dest: opt.dev + '/' } ]
  8. 8. gulpjs.com >1 year old npm install -g gulp
  9. 9. “Gulp does nothing but provide some streams and a basic task system.” - Eric Schoffstall
  10. 10. STREAMS
  11. 11. Why are steams so great? Imagine the I/O and tasks of a build system
  12. 12. Read file(s) Task 1 Task 2 Task 3 Write file(s) File system File system What you probably imaginedInput Output
  13. 13. Read file(s) Task 1 Read file(s) Task 2 Write file(s) “temp” folder File system Hopefully not what you imagined Input Output Write file(s) File systemFinal Output
  14. 14. Plugins do more than one task Plugins do tasks that shouldn’t be in a plugin, like tests gruntfile.js is configuration, not code Grunt
  15. 15. Build systems should empower, not impede
  16. 16. Gulp With Gulp your build file is code and not config Plugins are simple and do one thing —most are a ~20 line function Tasks are executed with maximum concurrency I/O works the way you picture it
  17. 17. There are only five things you need to know to understand gulp.
  18. 18. gulp.task(name,fn) Registers the function with a name that can be executed from the CLI
  19. 19. gulp.src(glob) Returns a readable stream
  20. 20. gulp.dest(glob) Returns a writable stream
  21. 21. .pipe() Node.js function that takes the readable source stream, gulp.src and hooks the output to the destination writable stream, gulp.dest github.com/substack/stream-handbook#pipe
  22. 22. .pipe(foo) returns foo, e.g., a.pipe(b).pipe(c).pipe(d) is the same as a.pipe(b); b.pipe(c); c.pipe(d);
  23. 23. .pipe() in gulp var a = gulp.src(‘styles.less'); // input a.pipe(less()) // => compiled css .pipe(auto()) // => prefixed css .pipe(gulp.dest(‘styles.css')); // => output
  24. 24. gulp.task('styles', function () { gulp.src('/less/styles.less') }); .pipe(less()) .pipe(gulp.dest('/public/css'))
  25. 25. gulp.watch(glob,fn) Executes a function when a file that matches the glob changes
  26. 26. gulpfile.js vs gruntfile.js demo
  27. 27. gulp-less gulp-uglify gulp-concat gulp-header gulp-minify-css gulp-help gulp-notify gulp-autoprefixer gulp-recess moment npm install
  28. 28. One can use Node packages instead of gulp plugins npmjs.org/package/del = npmjs.org/package/gulp-clean
  29. 29. npm install gulp-grunt npmjs.org/package/gulp-grunt
  30. 30. Gulp ain’t all awesome
  31. 31. Error management ≠ good
  32. 32. Use cases Because build systems should empower, not impede
  33. 33. Continue using Grunt on pre-existing projects Continue using Grunt with dev teams that are used to it Start using Gulp for personal projects Start using Gulp for work projects whenever possible
  34. 34. questions
  35. 35. Patrick Burtchaell @pburtchaell pburchaell.com gibbon.co/pb/gulp

×