Modern Developer's Workflow

Modern Developer's Workflow

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

921b21db0adbe6810cae63e616777d4a?s=128

thebeckyhamm

August 28, 2014
Tweet

Transcript

  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/