Skip to content

Instantly share code, notes, and snippets.

@ichadhr
Created August 23, 2015 17:54
Show Gist options
  • Save ichadhr/149ad18d5ef6748a4607 to your computer and use it in GitHub Desktop.
Save ichadhr/149ad18d5ef6748a4607 to your computer and use it in GitHub Desktop.
Gulp static server

package.json

"devDependencies": {
    "connect-livereload": "^0.5.3",
    "express": "^4.13.3",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-jshint": "^1.11.2",
    "gulp-minify-css": "^1.2.0",
    "gulp-ruby-sass": "^1.0.0",
    "gulp-scss-lint": "^0.2.4",
    "gulp-uglify": "^1.2.0",
    "jshint-stylish": "^2.0.1",
    "tiny-lr": "^0.1.6"
  }

Gulpfile.js

// gulpfile.js
// requires
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var scsslint = require('gulp-scss-lint');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// express server
gulp.task('express', function() {
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')({port: 35729}));
  app.use(express.static(__dirname));
  app.listen(4000, '0.0.0.0');
});

// tinylr
var tinylr;
gulp.task('livereload', function() {
  tinylr = require('tiny-lr')();
    tinylr.listen(35729);
});

// auto reload
function notifyLiveReload(event) {
  var fileName = require('path').relative(__dirname, event.path);

  tinylr.changed({
    body: {
      files: [fileName]
    }
  });
}

// lint sass
gulp.task('lint-sass', function() {
  gulp.src('src/sass/*.scss')
  .pipe(scsslint({'config': '.scss-lint.yml'}));
});

// styles
gulp.task('build-css', ['lint-sass'], function() {
  return sass('src/sass', {style: 'expanded'})
    .pipe(autoprefixer({browsers: ['last 2 version', 'Firefox < 20', '> 5%'], cascade: false}))
    .pipe(concat('theme.min.css'))
    .pipe(minifycss())
    .pipe(gulp.dest('assets'));
});

// production style build
// gulp.task('build-css', ['styles'], function() {
//   return gulp.src('assets/css/*.css')
//     .pipe(concat('theme.min.css'))
//     .pipe(minifycss())
//     .pipe(gulp.dest('assets'));
// });

// lint js
gulp.task('lint-js', function() {
  return gulp.src('src/js/**/*.js')
  .pipe(jshint())
  .pipe(jshint.reporter('jshint-stylish'));
});

// production js build
gulp.task('build-js', ['lint-js'], function() {
  return gulp.src('src/js/*.js')
    .pipe(concat('theme.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('assets'));
});

// watch
gulp.task('watch', function() {
  gulp.watch('src/sass/*.scss', ['build-css']);
  gulp.watch('src/js/*.js', ['build-js']);
  gulp.watch('*.html', notifyLiveReload);
  gulp.watch('assets/theme.min.css', notifyLiveReload);
  gulp.watch('assets/theme.min.js', notifyLiveReload);
  gulp.watch('assets/img/**/*.*', notifyLiveReload);
});

gulp.task('default', ['build-css', 'build-js', 'express', 'livereload', 'watch'], function() {
  console.log('running on... http://localhost:4000')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment