How to fix SyntaxError: Unexpected token var in gulp

Question

I have problems with gulp. when I type gulp in terminal it show me this message.

   var ngannotate = require('gulp-ng-annotate');

SyntaxError: Unexpected token var at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Liftoff.handleArguments
(/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3) at Liftoff. (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:198:16)

I don't know why this happen. last tow weeks it work correctly. how to fix it?

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

gulp file.js

    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'),
    browserSync = require('browser-sync'),
    del = require('del'),
    var ngannotate = require('gulp-ng-annotate');

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"
                    }
                });
                // Watch any files in dist/, reload on change
                gulp.watch(['dist/**']).on('change', browserSync.reload);
            });

the technologies the I have used is

angularjs
bootstrap
gulp

Nrzonline Nrzonline · Accepted Answer · 2017-02-27T08:38:39

You have var already placed in front of the stacked defining of the variables. Remove the var before ngannotate.

var ngannotate = require('gulp-ng-annotate');

to

ngannotate = require('gulp-ng-annotate');

An indentation would be nice in this situation

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'),
    browserSync = require('browser-sync'),
    del = require('del'),
    ngannotate = require('gulp-ng-annotate');

How to fix SyntaxError: Unexpected token var in gulp

1 Answers