Question

我已经成功地将所有scss包括bootstraps组合成一个使用gulp的缩小文件。现在我正在尝试用我的js和bootstraps做同样的事情。问题是uglify不断向我抛出错误，例如Unexpected token：name（$）等。并且因为这个而没有缩小/编译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中的bootstrap文件，而不是将它们复制到我的文件中。这是一个帮助我http://george.webb.uno/posts/gulp-and-npm-for-front-end-web-development

的教程

如果你复制这段代码，请注意源图片还没有正常工作。我将继续努力。

包括引导错误的gulp引导js

1 个答案: