Gulp和index.html問題

Question

我有4個html文件。

index.html，

menu.html，

dishdetail.html，

contactus.html，

我正在使用gulp進行測試和實時預覽。 但是，index.html不在dist文件夾內並置。 所有其他文件夾，例如圖像，樣式和腳本，都被串聯在一起。 因此，這就是我設置口水的方法。

var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
ngannotate = require('gulp-ng-annotate'),
browserSync = require('browser-sync'),
del = require('del');

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

 // Clean
   gulp.task('clean', function() {
   return del(['dist']);
 });

 //Default task
 gulp.task('default', ['clean'], function() {
 gulp.start('usemin', 'imagemin','copyfonts');
 });

gulp.task('usemin',['jshint'], function () {
return gulp.src('app/*.html')
  .pipe(usemin({
    css:[minifycss(),rev()],
    js: [ngannotate(),uglify(),rev()]
  }))
  .pipe(gulp.dest('dist/'));
});

// Images
gulp.task('imagemin', function() {
 return del(['dist/images']), gulp.src('app/images/**/*')
   .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, 
   interlaced:    
   true })))
  .pipe(gulp.dest('dist/images'))
  .pipe(notify({ message: 'Images task complete' }));
});

gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});

// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}',    
['usemin']);
  // Watch image files
gulp.watch('app/images/**/*', ['imagemin']);

});

gulp.task('browser-sync', ['default'], function () {
var files = [
  'app/**/*.html',
  'app/styles/**/*.css',
  'app/images/**/*.png',
  'app/scripts/**/*.js',
  'dist/**/*'
 ];

 browserSync.init(files, {
  server: {
    baseDir: 'dist',
    index: 'index.html'
  },
 reloadDelay: 1000
});
    // Watch any files in dist/, reload on change
 gulp.watch(['dist/**']).on('change', browserSync.reload);
});

當我輸入cmd gulp時 ，出現此錯誤。

events.js:160
  throw er; // Unhandled 'error' event
  ^

Error: write after end
at writeAfterEnd (C:\Users\Theodosios\Desktop\AngularJs\Week3\03_SPAs\node_m
odules\gulp-minify-css\node_modules\readable-  
stream\lib\_stream_writable.js:229:
12)
at Transform.Writable.write (C:\Users\Theodosios\Desktop\AngularJs\Week3\03_
SPAs\node_modules\gulp-minify-css\node_modules\readable-  
stream\lib\_stream_writa
ble.js:272:20)

任何想法為什么會這樣？

所有模塊都安裝在npm中。 它們顯示在這里

package.json

{
"name": "conFusion",
"private": true,
"devDependencies": {
  "browser-sync": "^2.18.8",
  "del": "^2.2.2",
  "gulp": "^3.9.1",
  "gulp-cache": "^0.4.5",
  "gulp-changed": "^2.0.0",
  "gulp-concat": "^2.6.1",
  "gulp-imagemin": "^3.1.1",
  "gulp-jshint": "^2.0.4",
  "gulp-minify-css": "^1.2.4",
  "gulp-ng-annotate": "^2.0.0",
  "gulp-notify": "^3.0.0",
  "gulp-rename": "^1.2.2",
  "gulp-rev": "^7.1.2",
  "gulp-uglify": "^2.0.1",
  "gulp-usemin": "^0.3.28",
  "jshint": "^2.9.4",
  "jshint-stylish": "^2.2.1"
},
"engines": {
  "node": ">=0.10.0"
}
}

謝謝，

西奧

Answer 1

使用gulp-useref插件

npm install --save-dev gulp-useref

如下更新gulpfile.js

var useref = require('gulp-useref');

gulp.task('usemin',['jshint'], function () {
  return gulp.src('./app/*.html')
  .pipe(useref()) 
  .pipe(usemin({
    css:[minifycss(),rev()],
    js: [ngannotate(),uglify(),rev()]
  }))
  .pipe(gulp.dest('dist/'));
});

Answer 2

有兩個可能的原因：

首先，不推薦使用gulp-minify-css ，他們建議使用gulp-clean-css ，因此您應該嘗試對其進行更新。

其次， gulp-usemin是專為節點>=4.0和你engines.node設置為>=0.10.0 。