Gulp keeps throwing errors and missing modules

Question

Hi I am working with the web starter kit angular version and am having real issues compiling the code without errors. The main problematic task is the scripts one which keeps giving me random missing modules and uglify/parse problem.

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error
    at new JS_Parse_Error (C:\Users\Jensten\webkit\node_modules\gulp
-uglify\node_modules\uglify-js\lib\parse.js:196:18)
    at js_error (C:\Users\Jensten\webkit\node_modules\gulp-uglify\no
de_modules\uglify-js\lib\parse.js:204:11)
    at croak (C:\Users\Jensten\webkit\node_modules\gulp-uglify\node_
modules\uglify-js\lib\parse.js:679:41)
    at token_error (C:\Users\Jensten\webkit\node_modules\gulp-uglify
\node_modules\uglify-js\lib\parse.js:683:9)
    at expect_token (C:\Users\Jensten\webkit\node_modules\gulp-uglif
y\node_modules\uglify-js\lib\parse.js:696:9)
    at expect (C:\Users\Jensten\webkit\node_modules\gulp-uglify\node
_modules\uglify-js\lib\parse.js:699:36)
    at expr_list (C:\Users\Jensten\webkit\node_modules\gulp-uglify\n
ode_modules\uglify-js\lib\parse.js:1202:44)
    at C:\Users\Jensten\webkit\node_modules\gulp-uglify\node_modules
\uglify-js\lib\parse.js:1217:23
    at C:\Users\Jensten\webkit\node_modules\gulp-uglify\node_modules
\uglify-js\lib\parse.js:722:24
    at expr_atom (C:\Users\Jensten\webkit\node_modules\gulp-uglify\n
ode_modules\uglify-js\lib\parse.js:1180:35)

C:\Users\Jensten\webkit\>gulp html
[16:47:01] Using gulpfile ~\pokerstars-webkit\gulpfile.js
[16:47:01] Starting 'html'...
[16:47:02] 'html' errored after 1.54 s
[16:47:02] TypeError: undefined is not a function
    at Gulp.<anonymous> (C:\Users\Jensten\webkit\gulpfile.js:130:18)

    at module.exports (C:\Users\Jensten\webkit\node_modules\gulp\nod
e_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Users\Jensten\webkit\node_modu
les\gulp\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Users\Jensten\webkit\node_modu
les\gulp\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\Users\Jensten\webkit\node_modules
\gulp\node_modules\orchestrator\index.js:134:8)
    at c:\Users\Coutolil\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:2
0
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)
    at node.js:814:3

My gulp.js file contains the following:

/**
 *
 *  Web Starter Kit
 *  Copyright 2014 Google Inc. All rights reserved.
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License
 *
 */

'use strict';

// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var pagespeed = require('psi');
var reload = browserSync.reload;

var AUTOPREFIXER_BROWSERS = [
    'ie >= 10',
    'ie_mob >= 10',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23',
    'ios >= 7',
    'android >= 4.0',
    'bb >= 10'
];

// Lint JavaScript
gulp.task('jshint', function() {
    return gulp.src('app/scripts/**/*.js')
        .pipe(reload({stream: true, once: true}))
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish'))
        .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});

// Optimize Images
gulp.task('images', function() {
    return gulp.src('app/assets/images/**/*')
        .pipe($.cache($.imagemin({
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('dist/assets/images'))
        .pipe($.size({title: 'images'}));
});

// Copy All Files At The Root Level (app)
gulp.task('copy', function() {
    return gulp.src(['app/*', '!app/*.html', '!app/scss', '!app/scripts'], {dot: true})
        .pipe(gulp.dest('dist'))
        .pipe($.size({title: 'copy'}));
});

// Copy Web Fonts To Dist
gulp.task('fonts', function() {
    return gulp.src(['app/assets/fonts/**'])
        .pipe(gulp.dest('dist/assets/fonts'))
        .pipe($.size({title: 'fonts'}));
});


// Automatically Prefix CSS
gulp.task('styles:css', function() {
    return gulp.src('app/styles/css/**/*.css')
        .pipe($.changed('app/styles'))
        .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
        .pipe(gulp.dest('app/styles'))
        .pipe($.size({title: 'styles:css'}));
});

// Compile Sass For Style Guide Components (app/styles/components)
gulp.task('styles:scss', function() {
    var path = require('path');
    return gulp.src('app/scss/app.scss')
        .pipe($.sass({
            style: 'expanded',
            precision: 10,
            loadPath: ['app/scss']
        }))
        .on('error', console.error.bind(console))
        .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
        .pipe(gulp.dest('app/assets/styles'))
        .pipe(reload({stream:true}))
        .pipe($.size({title: 'styles:scss'}));
});

//Watch sass

//---end Watch sass

// Output Final CSS Styles
gulp.task('styles', ['styles:scss', 'styles:css']);

// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function() {
    return gulp.src('app/**/*.html')
        .pipe($.useref.assets({searchPath: '{.tmp,app}'}))
        // Concatenate And Minify JavaScript
        .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
        // Remove Any Unused CSS
        // commented for now as it doesn't work well with angular (ng-class for example)
        /*.pipe($.if('*.css', $.uncss({
            html: [
                'app/index.html'
            ],
            // CSS Selectors for UnCSS to ignore
            ignore: [
                '.navdrawer-container.open',
                /.app-bar.open/
            ]
        })))*/
        // Concatenate And Minify Styles
        .pipe($.if('*.css', $.csso()))
        .pipe($.useref.restore())
        .pipe($.useref())
        // Update Production Style Guide Paths
        .pipe($.replace('components/components.css', 'components/main.min.css'))
        // Minify Any HTML
        .pipe($.if('*.html', $.minifyHtml({empty: true})))
        // Output Files
        .pipe(gulp.dest('dist'))
        .pipe($.size({title: 'html'}));
});

gulp.task('scripts', function() {
    return gulp.src('app/scripts/**/*.js')
        .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
        .pipe($.sourcemaps.init())
        .pipe($.concat('app.js'))
        .pipe($.sourcemaps.write('./'))
        .pipe(gulp.dest('app/assets/scripts'));
});

gulp.task('vendor', function() {
    var mainBowerFiles = require('main-bower-files');
    return gulp.src(mainBowerFiles(/* options */))
        .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
        .pipe($.sourcemaps.init())
        .pipe($.concat('vendor.js'))
        .pipe($.sourcemaps.write('./'))
        .pipe(gulp.dest('app/assets/scripts'));
})

// Clean Output Directory
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));

// Watch Files For Changes & Reload
gulp.task('serve', function() {
    browserSync({
        open: false,
        notify: true,
        server: {
            baseDir: ['.tmp', 'app']
        }
    });

    gulp.watch(['app/**/*.html'], reload);
    gulp.watch(['app/scss/**/*.scss'], ['styles:scss']);
//  gulp.watch(['{.tmp,app}/assets/styles/**/*.css'], ['styles:css']);
    gulp.watch(['app/scripts/**/*.js'], [/*'jshint',*/ 'scripts', reload]);
    gulp.watch(['app/assets/images/**/*'], reload);
});

// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function() {
    browserSync({
        open: false,
        notify: true,
        server: {
            baseDir: 'dist'
        }
    });
});

// Build Production Files, the Default Task
gulp.task('default', ['clean'], function(cb) {
    runSequence('styles', 'vendor', 'scripts', ['jshint', 'html', 'images', 'fonts', 'copy'], cb);
});

// Run PageSpeed Insights
// Update `url` below to the public URL for your site
gulp.task('pagespeed', pagespeed.bind(null, {
    // By default, we use the PageSpeed Insights
    // free (no API key) tier. You can use a Google
    // Developer API key if you have one. See
    // http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY'
    url: 'https://example.com',
    strategy: 'mobile'
}));

// Load custom tasks from the `tasks` directory
try {
    require('require-dir')('tasks');
} catch(err) {
}

I am happy to use a different file, all I want is to make sure that: Angular, SASS, compression, and file output to the assets directory are working. I am currently able to run the project but the default task obviously does not run on gulp serve, hence why I was unable to see any errors before.

Could anyone point me in the right direction?

Answer 1

Place your devDependencies at correct place in package.json file as shown below

{
  "name": "my-project",
  "private": true,
   "devDependencies": {
   //dependencies are place here
   },
  "engines": {
  "node": ">=0.10.0"
  }
}

Answer 2

I had the same problem just now,then i realized that I haven't added the relative Plug-in to gulp. After I add it,then it's solved！

maybe this is the solution.