Skip to content

Instantly share code, notes, and snippets.

@Hendrixer
Last active June 7, 2022 14:42
Show Gist options
  • Save Hendrixer/9939346 to your computer and use it in GitHub Desktop.
Save Hendrixer/9939346 to your computer and use it in GitHub Desktop.
Gulpfile with Livereload, Nodemon, and other features
var gulp = require('gulp'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
server = require('tiny-lr')(),
refresh = require('gulp-livereload'),
mocha = require('gulp-mocha'),
stylus = require('gulp-stylus'),
notify = require('gulp-notify'),
nodemon = require('gulp-nodemon'),
jshint = require('gulp-jshint'),
lrPort = 35729;
var paths = {
styles: ['./client/styles/sty/*.styl'],
assets: ['./client/assets/'],
scripts: [
'./client/src/app/app.js',
'./client/src/app/app.controller.js',
'./client/src/cards/card.js',
'./client/src/cards/card.service.js',
'./client/src/cards/card.directive.js',
'./client/src/cards/card.controller.js',
'./client/src/**/*.js'
],
html: [
'./client/src/**/*.html',
'./client/src/index.html',
'./client/src/cards/directiveTemplates/*.html'
],
server: {
js: ['./server/**/*.js'],
specs: ['./server/cards/specs/*.js']
}
};
gulp.task('serve', function(){
nodemon({'script': 'index.js'});
});
gulp.task('lint', function(){
return gulp.src(paths.scripts)
.pipe(plumber())
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(notify({message: 'jshint done'}));
});
gulp.task('scripts', function(){
return gulp.src(paths.scripts)
.pipe(plumber())
.pipe(concat('main.js'))
.pipe(gulp.dest('./client/'))
.pipe(refresh(server))
.pipe(notify({message: 'JS concated'}));
});
gulp.task('test', function(){
return gulp.src(paths.server.specs)
.pipe(mocha({reporter: 'spec'}))
.pipe(notify({message: "Specs ran"}));
});
gulp.task('stylus', function(){
return gulp.src(paths.styles)
.pipe(plumber())
.pipe(stylus())
.pipe(gulp.dest('./client/styles/css'))
.pipe(refresh(server))
.pipe(notify({message: 'stylus done'}));
});
gulp.task('html', function(){
return gulp.task('html', function(){
gulp.src(paths.html)
.pipe(refresh(server))
.pipe(notify({message: 'Views refreshed'}));
});
});
gulp.task('build', ['stylus', 'scripts', 'lint']);
gulp.task('lr', function(){
server.listen(lrPort, function(err){
if(err) {return console.error(err);}
});
});
gulp.task('watch', function(){
gulp.watch(paths.html, ['html']);
gulp.watch(paths.scripts, ['lint', 'scripts']);
gulp.watch(paths.styles, ['stylus']);
});
gulp.task('default', ['test', 'build', 'lr', 'serve', 'watch']);
@hadifarnoud
Copy link

it doesn't live reload if I change css. am I doing anything wrong?

var gulp        = require('gulp'),
    concat      = require('gulp-concat'),
    plumber     = require('gulp-plumber'),
    server      = require('tiny-lr'),
    refresh     = require('gulp-livereload'),
    notify      = require('gulp-notify'),
    nodemon     = require('gulp-nodemon'),
    jshint      = require('gulp-jshint'),
    concat      = require('gulp-concat'),
    cssnano     = require('gulp-cssnano'),
    sourcemaps = require('gulp-sourcemaps'),
    lrPort      = 35729;

var paths = {
  styles: ['public/stylesheets/*.css'],

  images: ['public/images'],
  scripts: [
    'public/javascripts/*.js'
  ],
  views: [
  'views/**/*.hbs',

  ],

  server: {
    js: ['./bin/www']
  }
};


gulp.task('serve', function(){
  nodemon({'script': './bin/www'});
});

gulp.task('lint', function(){
  return gulp.src(paths.scripts)
    .pipe(plumber())
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(notify({message: 'jshint done'}));
});

gulp.task('scripts', function(){
  return gulp.src(paths.scripts)
    .pipe(plumber())
    .pipe(concat('script.js'))
    .pipe(gulp.dest('public/build'))
    .pipe(refresh(server))
    .pipe(notify({message: 'JS concated'}));
});

gulp.task('styles', function(){
  return gulp.src(paths.styles)
    .pipe(plumber())
    .pipe(sourcemaps.init())
        .pipe(concat('styles.css'))
        .pipe(cssnano())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/build/'))
    .pipe(refresh(server))
    .pipe(notify({message: 'css done'}));
});

gulp.task('build', ['styles', 'scripts', 'lint']);

gulp.task('lr', function(){
  server().listen(lrPort, function(err){
    if(err) {return console.error(err);}
  });
});

gulp.task('watch', function(){
  gulp.watch(paths.scripts, ['lint', 'scripts']);
  gulp.watch(paths.styles, ['styles']);
});

gulp.task('default', ['build', 'lr', 'serve', 'watch']);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment