gulp-concat两次的内容 [英] gulp-concat twice the content

问题描述

对我来说这是一件奇怪的事情，我有一个任务来连接我的 .js 文件，然后用观察者将它们丑化，但是 concat

这是我的gulp文件：

 'use strict'; 
 
 let gulp = require（'gulp'）; 
 let stylus = require（'gulp-stylus'）; 
 let sourcemaps = require（'gulp-sourcemaps'）; 
 let concat = require（'gulp-concat'）; 
 let uglify = require（'gulp-uglify'）; 
 let plumber = require（'gulp-plumber'）; 
 let bootstrap = require（'bootstrap-styl'）; 
让破裂=要求（'破裂'）; 
让copy = require（'gulp-copy2'）; 
 
 / * 
准备路径
 * / 
 let base ='./theme'; 
 let themeName ='自己主题'; 
 
让路径= {
 stylus：`$ {base} / $ {themeName} / css`，
 js：`$ {base} / $ {themeName} / js `，
 vendor：`$ {base} / $ {themeName} / js / vendor` 
} 
 
 / * 
手写笔编译
 * / 
 gulp.task（'stylus-compile'，（）=> {
 return gulp.src（[`$ {paths.stylus} / dev / *。styl`，`$ {paths。 （手写笔（{
 use：[bootstrap（），rupture（）]（$）
.pipe（plumber（））
。 ，
 compress：true 
）））
 .pipe（sourcemaps.write（'./'））
 .pipe（gulp.dest（`$ {paths.stylus} `））; 
}）; 
 $ b $ * * 
获取bootstrap-styl js文件和concat / uglify它们
 * / 
 
 gulp.task（'bootstrap-build'， （）=> {
 return gulp.src（[
'node_modules / bootstrap-styl / js / transition.js'，
'node_modules / bootstrap-styl / js / alert.js '，
'node_modules / bootstrap-styl / js / button.js'，
'node_modules / bootstrap-styl / js / carousel.js'，
'node_modules / bootstrap-styl / js /collapse.js'，
'node_modules / bootstrap-styl / js / dropdown.js'，
'node_modules / bootstrap-styl / js / modal.js'，
'node_modules / bootstrap -styl / js / tooltip.js'，
'node_modules / bootstrap-styl / js / popover.js'，
'node_modules / bootstrap-styl / js / scrollspy.js'，
 'node_modules / bootstrap-styl / js / tab.js'，
'node_modules / bootstrap-styl / js / affix.js'
]）
 .pipe（sourcemaps.init（）） 
 .pipe（concat（'bootstrap.min.js'））
 .pipe（uglify（））
 .pipe（sourcemaps.write（'。 /'））
 .pipe（gulp.dest（`$ {paths.vendor}`））; 
 
}）; 
 $ b $ * / $ 
从NPM获取js资产
 * / 
 gulp.task（'js-copy'，（）=> {
 let dirs = [
 {src：'node_modules / jquery / dist / jquery.min.js'，dest：`$ {paths.vendor} / jquery.min.js`}，
 {src： 'node_modules / sweet-scroll / sweet-scroll.min.js'，dest：`$ {paths.vendor} / sweet-scroll.min.js`} 
] 
 return copy（dirs）; 
}）; 
 $ b $ * 
 Concat / Uglify JS文件
 * / 
 gulp.task（'js-build'，（）=> {
返回gulp.src（`$ {paths.js} / *。js`）
 .pipe（sourcemaps.init（））
 .pipe（concat（'site.min.js'））
 // .pipe（uglify（））
 .pipe（sourcemaps.write（'./'））
 .pipe（gulp.dest（`$ {paths.js}`）） ; 
}）
 
 / * 
手表
 * / 
 gulp.task（'watch'，（）=> {
 gulp.watch（`$ {paths.js} / *。js`，['js-build']）; 
 gulp.watch（`$ {paths.stylus} / dev / *。styl`，[ 'stylus-compile']）; 
}）; 
 
 gulp.task（'default'，['bootstrap-build'，'js-copy'，'watch']）; 
  

bootstrap-build 任务不需要无论您调用任务多少次，内容都是内容的两倍，但 js-build 不会。

这里是测试将脚本分离为concat和结果：

文件1：

 （function（）{
 
 console.log（哦！）
 console.log（呃！）
 
}）。call这个）; 
  

档案2：

 （function（）{
 console.log（hey）
}）。call（this）; 
  

连接的文件（呃，oh文件在观察者被解雇后重新保存）：

$ b $

 （function（）{
 
 console.log（哦！）
 console.log 呃！）
 
}）。call（this）; 
（function（）{
 
 console.log（哦！）
 console.log（呃！）
 
}）。调用（这）; 
（function（）{
 console.log（hey）
}）。call（this）; 
 //＃sourceMappingURL = site.min.js.map 
 
（function（）{
 console.log（hey）
}）。call这个）; 
 //＃sourceMappingURL = site.min.js.map 
  

在每次重新保存，concat两倍的内容...我真的没有得到这个问题。任何想法？

感谢您的谅解。

解决方案

$ c> bootstrap-build 的作品是因为它将产生的 bootstrap.min.js 放在与源文件不同的文件夹中。

您的 js-build 任务会连接所有 .js 文件您的 path.js 文件夹，并将结果 site.min.js 放入同一文件夹。

这意味着首次运行 js-build 文件 file1.js 和 file2.js 连接到 site.min.js 中。第二次运行文件 file1.js ， file2.js 和 site.min。 js 连接到 site.min.js 。每次运行 js-build 任务时，您的 site.min.js 都会增长。

您需要做的是将 site.min.js 与其他文件连接在一起：

  gulp.task（'js-build'，（）=> {
 return gulp.src（[
`$ {paths.js} / *。js`，
`！$ {paths.js} / site.min.js` 
]）
 .pipe（sourcemaps.init （））
 .pipe（concat（'site.min.js'））
 // .pipe（uglify（））
 .pipe（sourcemaps.write（'./'） ）
.pipe（gulp.dest（`$ {paths.js}`））; 
}）
  

That's a weird thing for me, i have a task to concat my .js files and then uglify them with a watcher, but the concat task just twice the content in every call...

Here is my gulpfile:

'use strict';

let gulp        = require('gulp');
let stylus      = require('gulp-stylus');
let sourcemaps  = require('gulp-sourcemaps');
let concat      = require('gulp-concat');
let uglify      = require('gulp-uglify');
let plumber     = require('gulp-plumber');
let bootstrap   = require('bootstrap-styl');
let rupture     = require('rupture');
let copy        = require('gulp-copy2');

/*
  Prepare the paths
*/
let base = './theme';
let themeName = 'own-theme';

let paths = {
  stylus    : `${base}/${themeName}/css`,
  js        : `${base}/${themeName}/js`,
  vendor    : `${base}/${themeName}/js/vendor`
}

/*
  Stylus compile
*/
gulp.task('stylus-compile', () => {
  return gulp.src([`${paths.stylus}/dev/*.styl`, `${paths.stylus}/!**/_*.styl`])
    .pipe(plumber())
    .pipe(stylus({
      use: [bootstrap(), rupture()],
      compress: true
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(`${paths.stylus}`));
});

/*
  Get the bootstrap-styl js files and concat/uglify them
*/

gulp.task('bootstrap-build', () => {
  return gulp.src([
    'node_modules/bootstrap-styl/js/transition.js',
    'node_modules/bootstrap-styl/js/alert.js',
    'node_modules/bootstrap-styl/js/button.js',
    'node_modules/bootstrap-styl/js/carousel.js',
    'node_modules/bootstrap-styl/js/collapse.js',
    'node_modules/bootstrap-styl/js/dropdown.js',
    'node_modules/bootstrap-styl/js/modal.js',
    'node_modules/bootstrap-styl/js/tooltip.js',
    'node_modules/bootstrap-styl/js/popover.js',
    'node_modules/bootstrap-styl/js/scrollspy.js',
    'node_modules/bootstrap-styl/js/tab.js',
    'node_modules/bootstrap-styl/js/affix.js'
  ])
  .pipe(sourcemaps.init())
  .pipe(concat('bootstrap.min.js'))
  .pipe(uglify())
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest(`${paths.vendor}`));

});

/*
  Get the js assets from NPM
*/
gulp.task('js-copy', () => {
  let dirs = [
    { src: 'node_modules/jquery/dist/jquery.min.js', dest: `${paths.vendor}/jquery.min.js` },
    { src: 'node_modules/sweet-scroll/sweet-scroll.min.js', dest: `${paths.vendor}/sweet-scroll.min.js` }
  ]
    return copy(dirs);
});

/*
  Concat/Uglify the JS files
*/
gulp.task('js-build', () => {
return gulp.src(`${paths.js}/*.js`)
  .pipe(sourcemaps.init())
  .pipe(concat('site.min.js'))
  // .pipe(uglify())
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest(`${paths.js}`));
})

/*
  Watch
*/
gulp.task('watch', () => {
  gulp.watch(`${paths.js}/*.js`, ['js-build']);
  gulp.watch(`${paths.stylus}/dev/*.styl`, ['stylus-compile']);
});

gulp.task('default', ['bootstrap-build', 'js-copy', 'watch']);

The bootstrap-build task don't twice the content no matter how many times you call the task, but the js-build does.

Here are the test separated scripts to concat and the results:

File 1:

(function() {

  console.log("oh!")
  console.log("uh!")

}).call(this);

File 2:

(function() {
  console.log("hey")
}).call(this);

Concated file(uh, oh file re-saved after the watcher was fired):

(function() {

  console.log("oh!")
  console.log("uh!")

}).call(this);
(function() {

  console.log("oh!")
  console.log("uh!")

}).call(this);
(function() {
  console.log("hey")
}).call(this);
//# sourceMappingURL=site.min.js.map

(function() {
  console.log("hey")
}).call(this);
//# sourceMappingURL=site.min.js.map

In every re-save, the concat twice the content... i really don't get the problem. Any idea?

Thanks in adnvance.

解决方案

The reason your bootstrap-build works is because it places the resulting bootstrap.min.js in a different folder than the source files.

Your js-build task however concatenates all .js files in your path.js folder and places the resulting site.min.js in that same folder.

That means when first running js-build the files file1.js and file2.js are concatenated into site.min.js. On a second run the files file1.js, file2.js and site.min.js are concatenated into site.min.js. Every time you run your js-build task your site.min.js grows.

What you need to do is exclude site.min.js from being concatenated with the other files:

gulp.task('js-build', () => {
  return gulp.src([
      `${paths.js}/*.js`,
      `!${paths.js}/site.min.js`
    ])
    .pipe(sourcemaps.init())
    .pipe(concat('site.min.js'))
    // .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(`${paths.js}`));
})

这篇关于gulp-concat两次的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！