包括引導js和gulp導致錯誤

Question

我已經成功地將包括引導程序在內的所有scss都使用gulp合並為一個縮小的文件。 現在，我嘗試對我的js和引導程序執行相同的操作。 問題是uglify像我意外的令牌一樣不斷向我拋出錯誤：名稱（$）等。因此，不會縮小/編譯bootstrap js。 現在，我開始相信我在這方面走錯了路。

這是我的文件結構：

app / js（此處為my.js文件）/ vendor / bootstrap / js / src /（此處為boostrap js文件）

如您所見，我所做的只是將bootstrap js文件復制到我的文件中，希望它們會與我的文件一起縮小/編譯。 但是，使用scss可以像通常那樣導入文件。 那我做錯了嗎？

這是我的gulp.js代碼

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglify');
var gulpSequence = require('gulp-sequence');
var autoPrefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var csslint = require('gulp-csslint');
var htmlReporter = require('gulp-csslint-report');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');

//plumber error 
var onError = function (err) {
  console.log(err);
};

//create sourcemaps, convert scss to css, lint check, minify and prefix
gulp.task('css', function(){
    return gulp.src('app/scss/**/*.scss')
        .pipe(plumber({
          errorHandler: onError
        }))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(csslint())
        .pipe(htmlReporter())
        .pipe(cleanCss())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(autoPrefixer({
            browsers: ['last 3 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'))
});


//create sourcemaps, lint check, compile into one file, minify
gulp.task('js', function() {
  return gulp.src('app/js/**/*.js')
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(sourcemaps.init())
    .pipe(jshint())
    .pipe(jshint.reporter('gulp-jshint-html-reporter', {
        filename: __dirname + '/jshint-output.html',
        createMissingFolders : false  
    }))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/js'))
});                                                                            

//copy php files to app
gulp.task('phpCopy', function(){
    return gulp.src('app/*.php')
        .pipe(plumber({
          errorHandler: onError
        }))
        .pipe(gulp.dest('dist'));
});

//functions to run on file save
gulp.task('watch', function(){
    gulp.watch('app/scss/**/*.scss', ['css']);
    gulp.watch('app/*.php', ['phpCopy']);
    gulp.watch('app/js/**/*.js', ['js']);
});

gulp.task('default', ['css', 'js', 'phpCopy']);

Answer 1

對於在此遇到麻煩的任何人，我都是為了解決此問題而做的。

//create sourcemaps, lint check, compile into one file, minify
gulp.task('js', function() {
  return gulp.src([
    'node_modules/jquery/dist/jquery.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'app/js/**/*.js'
    ])
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(sourcemaps.init())
    .pipe(jshint())
    .pipe(jshint.reporter('gulp-jshint-html-reporter', {
        filename: __dirname + '/jshint-output.html',
        createMissingFolders : false  
    }))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/js'))
});

我必須指向node_modules中的引導文件，而不是將它們復制到我的文件中。 這是一個幫助我http://george.webb.uno/posts/gulp-and-npm-for-front-end-web-development的教程

而且，如果您復制此代碼，請注意，源地圖還無法正常工作。 我將繼續努力。