Question

我正在尝试为我的项目添加gulp构建工具，它使用angularjs。当我在抛出错误后运行gulp构建工具

错误---插件错误＆gulp-uglify＆＃39;

F：\ testcode - Copy \ test \ test \ test.template.html：SyntaxError：意外的令牌：运算符（＆lt;）

详细说明： fileName：F：\ testcode - Copy \ test \ test \ test.template.html lineNumber：1

events.js：160 扔掉; //未处理的错误＆＃39;事件 ^

这是我的gulpfile.js文件

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


Please check the below link for more details on deployment and build system:

https://www.tutespace.com/2018/11/angular-js-build-deploy-using-gulp.html

Gulp构建失败

1 个答案: