CODEWITHSUNDEEP
node.jsgulplivereloadgulp-rename
Kevin Ham
Kevin Ham

Reputation: 71

Reloading js files and error out

No matter what I try, I can't seem to get my gulp to run without autoreloading my files and it errors after completion. Any help would be greatly appreciated.

Using OSX 10.10 (although same issue with 10.9)
Sass: 3.4.7
Node: v0.10.33
Ruby: 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]
npm: 1.4.28
gulp: 3.8.10 

[10:58:09] Using gulpfile ~/Sites/squirrel/content/library/gulpfile.js
[10:58:09] Starting 'responsive-style'...
[10:58:09] Starting 'ie-style'...
[10:58:09] Starting 'compatibility-style'...
[10:58:09] Starting 'legacy-style'...
[10:58:09] Starting 'global'...
[10:58:09] Starting 'tower-style'...
[10:58:09] Starting 'watch'...
[10:58:09] Finished 'watch' after 1.71 ms
[10:58:10] global.min.js was reloaded.
[10:58:10] Finished 'global' after 1.06 s
[10:58:10] Starting 'scripts'...
[10:58:10] Starting 'foundation-global'...
[10:58:10] app.min.js was reloaded.
[10:58:10] rem.min.js was reloaded.
[10:58:10] global.min.js was reloaded.
[10:58:10] Starting 'global'...
[10:58:10] Finished 'foundation-global' after 203 ms
[10:58:11] global.min.js was reloaded.
[10:58:11] Finished 'scripts' after 1.13 s

events.js:72
    throw er; // Unhandled 'error' event
          ^
TypeError: Object white-space:pre;font-family:monospace;content:__ESCAPED_FREE_TEXT_CLEAN_CSS0__ has no method 'split'
at Optimizer.tokenize (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/properties/optimizer.js:120:23)
at Object.Optimizer.process (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/properties/optimizer.js:270:20)
at Optimizer.optimize (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/selectors/optimizer.js:289:40)
at Object.Optimizer.process (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/selectors/optimizer.js:337:7)
at Object.optimizeSelectors [as 0] (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:375:10)
at replace (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:103:19)
at CleanCSS.minify (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:369:5)
at Object.ImportInliner.process.whenDone (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:70:25)
at Inliner.processNext (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/imports/inliner.js:96:22)
at Inliner.process (/Users/Kevin/Sites/squirrel/content/library/node_modules/gulp-minify-css/node_modules/clean-css/lib/imports/inliner.js:77:12)

Here's the gulpfile

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    concat = require('gulp-concat'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr(),
    scsslint = require('gulp-scss-lint'),
    // filesize = require('gulp-filesize'),
    gutil = require('gulp-util'),
    spawn = require('child_process').spawn;

gulp.task('auto-reload', function() {
  var process;
  function restart() {
    if (process) { process.kill(); }
    process = spawn('gulp', ['default'], {stdio: 'inherit'});
  }
  gulp.watch('gulpfile.js', restart);
  restart();
});

gulp.task('scss-lint', function() {
  gulp.src(['sass/*.scss', 'foundation/scss/*.scss'])
    .pipe(scsslint({'config': 'scss-lint-config.yml'})); //you can set scss-lint parameters, except the option 'exclude'
});
gulp.task('responsive-style', function() {
  return gulp.src('foundation/scss/responsive.scss')
    .pipe(sass({ style: 'compressed', loadPath: 'foundation/bower_components/foundation/scss', quiet: true}))
    .on('error', notify.onError({
        message: "Error: <%= error.message %>",
        title: "SASS Error"
      }))
    .pipe(minifycss())
    .pipe(gulp.dest('foundation/css'))
    // .pipe(filesize())
    .pipe(livereload(server));
});
gulp.task('tower-style', function() {
  return gulp.src('foundation/scss/tower/app.scss')
    .pipe(sass({ style: 'compressed', loadPath: 'foundation/bower_components/foundation/scss', quiet: true}))
    .on('error', notify.onError({
        message: "Error: <%= error.message %>",
        title: "SASS Error"
      }))
    .pipe(minifycss())
    .pipe(rename('tower.css'))
    .pipe(gulp.dest('foundation/css'))
    // .pipe(filesize())
    .pipe(livereload(server));
});
gulp.task('compatibility-style', function() {
  return gulp.src('foundation/scss/fixed.scss')
    .pipe(sass({ style: 'compressed', loadPath: 'foundation/bower_components/foundation/scss', quiet: true}))
    .on('error', notify.onError({
        message: "Error: <%= error.message %>",
        title: "SASS Error"
      }))
    .pipe(minifycss())
    .pipe(rename('foundation_compat.css'))
    .pipe(gulp.dest('css'))
    // .pipe(filesize())
    .pipe(livereload(server));
});
gulp.task('ie-style', function() {
  return gulp.src('foundation/scss/ie.scss')
    .pipe(sass({ style: 'compressed', loadPath: 'foundation/bower_components/foundation/scss', quiet: true}))
    .on('error', notify.onError({
        message: "Error: <%= error.message %>",
        title: "SASS Error"
      }))
    .pipe(minifycss())
    .pipe(gulp.dest('foundation/css'))
    // .pipe(filesize())
    .pipe(livereload(server));
});
gulp.task('legacy-style', function() {
  return gulp.src('sass/*.scss')
    .pipe(sass({ style: 'compressed', quiet: true}))
    .on('error', notify.onError({
        message: "Error: <%= error.message %>",
        title: "SASS Error"
      }))
    .pipe(minifycss())
    .pipe(gulp.dest('css'))
    // .pipe(filesize())
    .pipe(livereload(server));
});
// Scripts
gulp.task('scripts', ['global'], function() {
  return gulp.src(['foundation/js/app.js', 'foundation/js/rem.js'])
    // .pipe(filesize())
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify({outSourceMap: true}))
    .pipe(livereload(server))
    .pipe(gulp.dest('foundation/js'))
    // .pipe(filesize())
    // .pipe(notify({ message: 'Scripts task complete', onLast: true }));
});
//Foundation global
gulp.task('foundation-global', ['global'], function () {
  return gulp.src(['foundation/js/global.js', 'js/cr.mixpanel.js'])
    .pipe(concat('global.js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify({outSourceMap: true}))
    .pipe(livereload(server))
    .pipe(gulp.dest('foundation/js'));
});
// Global JS
gulp.task('global', function() {
  return gulp.src(['js/global.js'])
    // .pipe(filesize())
    .pipe(concat('global.js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify({outSourceMap: true}))
    .pipe(livereload(server))
    .pipe(gulp.dest('js'))
    // .pipe(filesize())
    // .pipe(notify({ message: 'Global task complete' }));
});
gulp.task('watch', function() {
  // Listen on port 35729
  server.listen(35729, function (err) {
    if (err) {
      return console.log(err);
      this.emit('end');
    };
    // Watch .scss files
    gulp.watch('foundation/scss/**/*.scss', ['responsive-style', 'compatibility-style', 'ie-style', 'tower-style']);
    gulp.watch('sass/**/*.scss', ['legacy-style']);
    // Watch .js files
    gulp.watch('foundation/js/**/*.js', ['scripts']);
    gulp.watch('js/*.js', ['global']);
  });
});
gulp.task('js-watch', function() {
    //gulp.watch('assets/scss/app.scss', ['styles']);
  // Listen on port 35729
  server.listen(35729, function (err) {
    if (err) {
      return console.log(err)
    };
    // Watch .js files
    gulp.watch('foundation/js/**/*.js', ['scripts']);
  });
});
gulp.task('default', ['responsive-style', 'ie-style', 'compatibility-style', 'legacy-style', 'scripts', 'global', 'tower-style', 'foundation-global', 'watch']);
gulp.task('build', ['responsive-style', 'ie-style', 'compatibility-style', 'legacy-style', 'scripts', 'global', 'tower-style', 'foundation-global']);
gulp.task('js', ['scripts', 'js-watch'])

package.json

    {
      "name": "squirrel-library",
      "version": "0.1.0",
      "devDependencies": {
        "gulp": "~3.8.7",
        "gulp-autoprefixer": "0.0.7",
        "gulp-cache": "~0.1.11",
        "gulp-concat": "~2.2.0",
        "gulp-csslint": "~0.1.4",
        "gulp-filesize": "0.0.6",
        "gulp-jshint": "~1.6.1",
        "gulp-livereload": "^2.1.0",
        "gulp-minify-css": "^0.3.7",
        "gulp-notify": "^1.4.2",
        "gulp-rename": "^1.2.0",
        "gulp-ruby-sass": "^0.7.1",
        "gulp-scss-lint": "^0.1.1",
        "gulp-uglify": "^0.3.1",
        "gulp-util": "^3.0.0",
        "jshint-stylish": "~0.2.0",
        "lazypipe": "~0.2.1",
        "tiny-lr": "^0.1.0"
      }
    }

Upvotes: 1

Views: 273

Answers (1)

Kevin Ham
Kevin Ham

Reputation: 71

So the problem has been resolved. Turns out each task was creating a temp folder for calls to gulp-ruby-sass, since all of the tasks are concatenating simultaneously, they were using the same temp folder name and were overwriting each other. Hence, them reloading over and over.

Upvotes: 0

Related Questions