GULP question, JS not being overwritten


I am trying GULP for the first time and everything except the JS “stuff” is working. The problem is that when saving JS, things are not overwritten, but added to the last saved stuff. If I have a JS file it would be included in the production js file three times if I save three times like this:


instead of file → updated file → updated file

Here is my gulpfile:

 * gulp
 * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

// Styles
gulp.task('styles', function() {
  return sass('source/scss/main.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(notify({ message: 'Styles task complete' }));

// Scripts
gulp.task('scripts', function() {
  return gulp.src('source/js/**/*.js')
    .pipe(rename({ suffix: '.min' }))
    .pipe(notify({ message: 'Scripts task complete' }));

// Images
gulp.task('images', function() {
  return gulp.src('source/img/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(notify({ message: 'Images task complete' }));

// Clean
gulp.task('clean', function() {
  return del(['source/assets/css', 'source/assets/js', 'source/assets/img']);

// Default task
gulp.task('default', ['clean'], function() {
  gulp.start('styles', 'scripts', 'images');

// Watch
gulp.task('watch', function() {

  // Watch .scss files'source/scss/**/*.scss', ['styles']);

  // Watch .js files'source/js/**/*.js', ['scripts']);

  // Watch image files'source/img/**/*', ['images']);

  // Create LiveReload server

  // Watch any files in dist/, reload on change['public/**']).on('change', livereload.changed);


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.