Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lunchbox Session: Bower & Gulp

Lunchbox Session: Bower & Gulp

Faiz Mokhtar

October 21, 2015
Tweet

More Decks by Faiz Mokhtar

Other Decks in Technology

Transcript

  1. Bower • A package manager for the web. • Develop

    by folks at Twitter. • Similar to Cocoapods (iOS) or Gradle (Android). • You can install most of the front-end libraries from Bower. • Helps you to manage dependencies (Bootstrap, jQuery, etc)
  2. Why should you use Bower? • You don’t have to

    worry about third-party code dependencies anymore. ◦ It helps you to download them, update them and resolve their dependencies. • You can just easily reproduce the software stack for a new project, team collaboration or whatever.
  3. The Downside • If either Github or Bower Registry goes

    down, you can’t download or update your packages.
  4. Installing bower.json { "name": "lunchbox", "version": "0.1.0", "authors": [ "Faiz

    Mokhtar <[email protected]>" ], "dependencies": { "foundation": "~5.5.2", "slick-carousel": "~1.5.8" }, "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests", "libs" ] }
  5. Installing Install the packages $ bower install By default, will

    install the packages in bower_components/.
  6. Gulp.js • It’s a task runner for development. • It

    can do a lot of things ◦ Compile SASS/ SCSS/ LESS into CSS ◦ Minify CSS/ JS / JS ◦ Concatenate CSSs and JSs files into one. ◦ Remove unused codes ◦ and many more...
  7. Why should you use Gulp? • It helps you to

    automate the repetitive tasks during development.
  8. Installing Initialise package.json. $ npm init Need to install gulp

    locally too (in project). $ npm install --save-dev gulp
  9. Installing Finally, you’ll need to create gulpfile.js in project root.

    // Plugins var gulp = require('gulp'); var gulpPlugin = require(‘gulp-plugin’); // Gulp task example gulp.task(‘task-name’, function() { return gulp.src(‘source-files’) // Get source files .pipe(gulpPlugin()) // Sends it through a gulp plugin .pipe(gulp.dest(‘destination’)) // Outputs file }); gulp.task(‘watch’, function() { gulp.watch(‘files-to-watch’, [‘task-name’]); });
  10. The downside • Gulp API is easy to understand. There’s

    only 4 functions. ◦ gulp.task - defines your task ◦ gulp.src - source the files that you want to use. ◦ gulp.dest - points the output folder. ◦ gulp.watch- watch the files for changes.