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}`));
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.