CODEWITHSUNDEEP
javascriptangularjsgulp
Theo
Theo

Reputation: 3149

Gulp and index.html issue

I have 4 html files.

index.html,

menu.html,

dishdetail.html,

contactus.html,

And I am using gulp for testing purposes and live preview. However,the index.html is not concatenated inside the dist folder. All the other folders such as images,styles and scripts are concatenated. So this is how I set up the gulp.

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);
});

And when I type in cmd gulp,I get this error.

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)

Any ideas why this is happening?

All the modules are instralled through npm. They are shown here

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

Thanks,

Theo

Upvotes: 0

Views: 762

Answers (2)

A. Aj
A. Aj

Reputation: 26

use gulp-useref plugin

npm install --save-dev gulp-useref

Update gulpfile.js as below

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/'));
});

Upvotes: 1

Deividas
Deividas

Reputation: 6507

There are a couple of possible reasons:

First, gulp-minify-css is deprecated and they recommend using gulp-clean-css, so you should try updating that.

Secondly, gulp-usemin is designed for node >=4.0 and your engines.node is set to >=0.10.0.

Upvotes: 0

Related Questions