Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Developer's Workflow

Modern Developer's Workflow

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

thebeckyhamm

August 28, 2014
Tweet

More Decks by thebeckyhamm

Other Decks in Technology

Transcript

  1. Step 1. Install Node • http://nodejs.org/ • Press the big

    green install button and follow the directions
  2. 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)
  3. 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
  4. 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/
  5. 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); };
  6. 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' })); }); !
  7. 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']); ! }); !
  8. Step 8. Create a git repository ! •Follow the instructions

    on the PTEC website to install your repository