Getting Started with Gulp.js

Transcript

1. Getting Started with Gulp.js
   

   View Slide

2. Install Node.js
   1
   nodejs.org
   

   View Slide

3. Get to know the command line.
   2
   ➜ npm -v
   

   View Slide

4. Install Gulp globally
   3
   ➜ sudo npm install -g gulp
   

   View Slide

5. Install Gulp globally
   3
   ➜ gulp -v
   

   View Slide

6. Install Gulp locally
   4
   ➜ cd ~/Casey/Sites/project
   

   View Slide

7. Install Gulp locally
   4
   ➜ project npm init
   npm init creates a package.json file in our project directory.
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

10. Setting up our Gulpfile
    5
    ➜ project npm install gulp-jshint gulp-sass gulp-concat
    gulp-uglify gulp-rename gulp-livereload --save-dev
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. Watch our files for changes
    6
    ➜ project gulp watch
    

    View Slide

17. Add more plugins.
    7
    

    View Slide

18. Profit.
    8
    

    View Slide