node.js - 重新加载js文件并报错

标签 node.js gulp livereload gulp-rename

无论我尝试什么，如果不自动重新加载我的文件，我似乎都无法让我的 gulp 运行，并且完成后会出错。任何帮助将不胜感激。

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)

这是 gulp 文件

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"
      }
    }

最佳答案

所以问题已经解决了。 事实证明，每个任务都在创建一个临时文件夹来调用 gulp-ruby-sass，因为所有任务都是同时连接的，所以它们使用相同的临时文件夹名称并相互覆盖。因此，他们一遍又一遍地重新加载。

关于node.js - 重新加载js文件并报错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26834449/

上一篇：javascript - 如何将 Node.js 响应(JSON)发送到 javascript 文件？

下一篇：javascript - 改进这个自定义函数 addClassIfVarDefined() 或分享更好的解决方案

相关文章：

node.js - MongoDB 错误 : Cannot use retryable writes with limit=0

javascript - javascript回调和匿名函数的范围是什么？

linux - 全局否定如何工作？

linux - Linux 上的 Laravel Elixir

javascript - SASS 编译后浏览器同步未重新加载

compass-sass - LiveReload + compass 错误-语法错误 : File to import not found or unreadable

livereload - 如何让livereload加载整个页面

javascript - Node.js 和 Discord.js 中 react 的多个输出

node.js - 如何在 Typescript 项目中使用来自 Node 16 的计时器/ promise ？

NestJS(7.5.1)不在观看模式下观看 Assets

©2024 IT工具网  联系我们