Modern Developer's Workflow

Setting up node, gulp, and git to speed up your workflow.

1. A Developer’s Workflow
2. Overview • node.js • gulp.js • running your code • using git for source control
3. Step 1. Install Node • http://nodejs.org/ • Press the big green install button and follow the directions
4. Step 2. Install Gulp • http://gulpjs.com/ • Open your terminal • npm install --global gulp
5. Step 3. Navigate to your project folder in Terminal • You can either: • Use cd commands (instructions for Mac here), • Open directly in Windows (instructions here), or • Drag and drop your folder into the top bar of the terminal (on Mac)
6. Step 4. Install gulp locally • npm install --save-dev gulp
7. Step 5. Install gulp plugins • These are all of the plugins you plan on using in your project. Here is an example: • npm install gulp-util gulp-ruby-sass gulp- autoprefixer gulp-minify-css gulp-uglify gulp- rename gulp-concat gulp-notify gulp-plumber -- save-dev
8. Step 5.5. FOR WINDOWS ONLY • If you plan on using gulp to run SASS, you need to have Ruby installed on your machine. Install it here: • http://www.rubyinstaller.org/
9. Step 6. Add gulpfile.js to your project var gulp = require('gulp'), gutil = require('gulp-util'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), clean = require('gulp-clean'), concat = require('gulp-concat'), notify = require('gulp-notify'), plumber = require('gulp-plumber'), livereload = require('gulp-livereload'); ! var onError = function (err) { gutil.beep(); console.log(err); };
10. continued… gulp.task('styles', function() { return gulp.src('library/scss/**.scss') .pipe(plumber(onError)) .pipe(sass({ style: 'expanded' })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('library/css')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(gulp.dest('library/css')) .pipe(notify({ message: 'Styles task complete' })); }); ! gulp.task('scripts', function() { return gulp.src('library/scripts/*.js') .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('library/scripts')) .pipe(notify({ message: 'Scripts task complete' })); }); !
11. continued… ! gulp.task('default', function() { gulp.start('styles'); gulp.start('scripts'); }); ! ! gulp.task('watch', function() { // Watch .scss files gulp.watch('library/**/*.scss', ['styles']); ! // Watch .js files gulp.watch('library/scripts/*.js', ['scripts']); ! }); !
12. Step 7. Run gulp ! •Go back to the terminal and run: •gulp
13. Step 8. Create a git repository ! •Follow the instructions on the PTEC website to install your repository
14. Other Resources ! •http://travismaynard.com/writing/getting-started-with-gulp •http://omcfarlane.co.uk/install-gulp-js-windows/ •http://www.rubyinstaller.org/