Getting Started with Gulp.js

Transcript

1. Getting Started with Gulp.js
2. Install Node.js 1 nodejs.org
3. Get to know the command line. 2 ➜ npm -v
4. Install Gulp globally 3 ➜ sudo npm install -g gulp
5. Install Gulp globally 3 ➜ gulp -v
6. Install Gulp locally 4 ➜ cd ~/Casey/Sites/project
7. Install Gulp locally 4 ➜ project npm init npm init creates a package.json file in our project directory.
8. Install Gulp locally 4 ➜ project npm install --save-dev gulp —save-dev instructs npm to add the dependence to the package.json file we created earlier.
9. Setting up our Gulpfile 5 WHAT WE NEED GULP TO DO Lint and concatenate our JavaScript Compile our Sass files Minify and rename everything Reload our browser after each change
10. Setting up our Gulpfile 5 ➜ project npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename gulp-livereload --save-dev
11. gulpfile.js // Include gulp var gulp = require('gulp'), ! // Include Our Plugins jshint = require('gulp-jshint’), sass = require(‘gulp-sass'), concat = require(‘gulp-concat’), uglify = require(‘gulp-uglify'), rename = require(‘gulp-rename’); livereload = require(‘gulp-livereload'); Set up Gulp includes
12. gulpfile.js // Lint Task gulp.task('lint', function() { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); Set up the Lint task
13. gulpfile.js // Compile Our Sass gulp.task('sass', function() { return gulp.src('scss/*.scss') .pipe(sass()) .pipe(gulp.dest('css')); }); Set up the Sass task
14. gulpfile.js // Concatenate & Minify JS gulp.task('scripts', function() { return gulp.src('js/*.js') .pipe(concat('main.js')) .pipe(gulp.dest('js')) .pipe(rename('main.min.js')) .pipe(uglify()) .pipe(gulp.dest('js')); }); Concatenate and Minify the JS
15. gulpfile.js gulp.task('watch', function() { server.listen(35729, function (err) { if (err) { return console.log(err) }; ! // Watch .scss files gulp.watch('scss/**/*.scss', ['sass']); ! // Watch .js files gulp.watch('js/**/*.js', ['scripts']); ! }); }); Watch the files and reload the browser when changed
16. Watch our files for changes 6 ➜ project gulp watch
17. Add more plugins. 7
18. Profit. 8