Gulp build fails

Question

I am trying to add gulp build tool for my project, which uses angularjs. When I run gulp build tool following error thrown

Error---Error in plugin 'gulp-uglify'

F:\testcode - Copy\test\test\test.template.html: SyntaxError: Unexpected token: operator (<)

Details: fileName: F:\testcode - Copy\test\test\test.template.html lineNumber: 1

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

Here is my gulpfile.js file

 'use strict'
var gulp = require('gulp'),
    sass =  require('gulp-sass'),
    browserSync = require('browser-sync'),
    fs = require('fs'),
    del = require('del'),
    uglify = require('gulp-uglify'),
    usemin = require('gulp-usemin'),
    rev = require('gulp-rev'),
    htmlmin = require('gulp-htmlmin'),
    cleanCss = require('gulp-clean-css');

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


    gulp.task('sass',function() {
        return gulp.src('./css/*.scss')
               .pipe(sass().on('error',sass.logError))
               .pipe(gulp.dest('./css'));
    });

    gulp.task('sass:watch',function(){
        gulp.watch('./css/*.scss',['sass'])
    });


    gulp.task('browser-sync',function(){
        var files = [
            './*.html',
            './static/css/**/*.css',
            './static/images/**/*.{png,jpg,gif}',
            './static/js/**/*.js'
        ];

        browserSync.init(files,{
            server:{
                baseDir:"./"
            }
        });
    });

    gulp.task('usemin', function() {
        return gulp.src('./static/js/**/*.html')
            .pipe(usemin({
                css: [ rev() ],
                html: [ htmlmin({ collapseWhitespace: true }) ],
                js: [ uglify(), rev() ],
                inlinejs: [ uglify() ],
                inlinecss: [ cleanCss(), 'concat' ]
            }))
            .pipe(uglify().on('error', function(e){
                console.log("Error---"+e);
            }))
            .pipe(gulp.dest('build/'));
    });

    gulp.task('default',['browser-sync'],function(){
        gulp.start('sass:watch');
    })

    gulp.task('build',['clean'],function () {
        gulp.start('usemin')
    })

Answer 1

Follow the below steps :

1. Install Nodejs 6.9.3
2. Install gulp using "npm install -g gulp"
3. create gulp file "gulpfile.js" in your project directory.
4. Add the below code snippet

a. Below task will concat(merge) all the included js file in ".SRC" into one file

var concat = require("gulp-concat"),
var uglify = require('gulp-uglify'),

gulp.task("js", function() {
    return gulp
       .src([
          "./dev/libs/angular/angular.1.4.5.min.js",
          "./dev/libs/angular/angular-animate.1.4.5.min.js"
       ])
       .pipe(concat("scripts.js"))
       .pipe(hash({
            "format": "{name}_{size}.js"
        }))
       .pipe(gulp.dest("PATH_FOR_BUILD"));         
    });

b. Below task will minify the concatenated file by removing spaces and comments to make the file in the compressed form :

gulp.task('uglify', function() {
    return gulp.src("PATH_FOR_BUILD")                   
     .pipe(uglify({ mangle: false })) 
     .pipe(gulp.dest("PATH_FOR_BUILD"));
});