如何使用Gulp将多个jQuery文件连接成一个?

时间:2015-04-06 20:12:08

标签: gulp

我只想加载一个使用jQuery代码的JS文件,但我对如何做到最好感到困惑。我担心的事情就是像下面那样草率地解决加载$(document).ready(function(){});下的所有脚本的问题

gulp.task('compile-js', function() {
    gulp.src(['./js/initialization.js', './stuff.js'./js/end.js'])
        .pipe(concat('script.js'))
        .pipe(gulp.dest('./public/javascripts/'));
});

其中initialization.jsend.js用于包装document.ready函数(我知道大声笑,因此要求)

有更好的方法吗?

1 个答案:

答案 0 :(得分:0)

写一个gulp文件,让我们称之为' jquery-noconflict.js'

var through = require('through2');
var gutil = require('gulp-util');
var fs = require('fs');

module.exports = function(){
  var stream = through.obj(function(file, enc, cb) {
    if (file.isStream()) {
      this.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!'));
      return cb();
    }

    if (file.isBuffer()) {
        var contents = file.contents.toString();
        file.contents = Buffer.concat([new Buffer('jQuery(document).ready(function(){'), file.contents, new Buffer('})')]);
    }

    cb(null, file);
  }, function(){

  })

  return stream;
};

您可能需要通过2'

安装

现在在你的gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var jquery = require('./jquery-noconflict');

gulp.task('compile-js', function(){
    gulp.src('./stuff.js')
        .pipe(concat('script.js'))
        .pipe(jquery())
        .pipe(gulp.dest('./public/javascripts/'))
})