Lunchbox Session: Bower & Gulp

Transcript

1. Bower & Gulp Essentials tools for front-end development lunchbox @ teratotech faizmokhtar
2. What is Bower & Gulp? Package manager Task runner
3. 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)
4. 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.
5. The Downside • If either Github or Bower Registry goes down, you can’t download or update your packages.
6. Installing Initialise your bower and edit bower.json $ bower init
7. Installing Install it using npm. $ npm install -g bower
8. Installing bower.json { "name": "lunchbox", "version": "0.1.0", "authors": [ "Faiz Mokhtar <mfmokhtar@gmail.com>" ], "dependencies": { "foundation": "~5.5.2", "slick-carousel": "~1.5.8" }, "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests", "libs" ] }
9. Installing Install the packages $ bower install By default, will install the packages in bower_components/.
10. 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...
11. Why should you use Gulp? • It helps you to automate the repetitive tasks during development.
12. The downside • There’s a little bit of learning curve.
13. Installing Install it using npm. $ npm install -g gulp
14. Installing Initialise package.json. $ npm init Need to install gulp locally too (in project). $ npm install --save-dev gulp
15. 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’]); });
16. 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.
17. IT’S DEMO TIME!