2016-04-22 87 views
1

這是一個奇怪的事情對我來說,我有一個任務,我的Concat的文件.js,然後用觀察家醜化他們,但concat任務只是在兩次每次通話內容......一飲而盡-CONCAT兩次內容

這裏是我的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']); 

bootstrap-build任務不兩倍的內容,不管你有多少次調用任務,但js-build一樣。

下面是測試分離腳本Concat的,結果:

文件1:

(function() { 

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

}).call(this); 

文件2:

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

Concated文件(呃,哦文件重新保存在觀察員被解僱後):

(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 

在每次重新保存時,連續兩次的內容...我真的沒有得到這個問題。任何想法?

非常感謝。

回答

3

您的bootstrap-build工作原因是因爲它將得到的bootstrap.min.js放在與源文件不同的文件夾中。

您的js-build任務會連接文件夾中的所有.js文件,並將產生的site.min.js放在同一文件夾中。

這意味着當第一次運行js-build時,文件file1.jsfile2.js連接成site.min.js。第二次運行時,文件file1.js,file2.jssite.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}`)); 
}) 
+0

事實上,這是所有! ...一件簡單的事情,但我無法看到它。謝謝你,真的。 – Nano