As shown in the following gulpfile.js, I am trying to compile jQuery, bootstrap.js, and a collection of Javascript snippets from a subfolder into a single app.js output file. It is working, except that the snippets from the subfolder are appearing at the top of the app.js output file, prior to jQuery being loaded.
How can I ensure that these files are output in the correct order?
const { src, dest, watch, series, parallel } = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
var merge2 = require('merge2');
const files = {
jsSrcPath: [
'../node_modules/jquery/dist/jquery.js',
'../node_modules/bootstrap/dist/js/bootstrap.js',
'js/*.js'
],
jsDstPath: '../public/js'
}
function jsTask(){
return merge2(files.jsSrcPath.map(function (file) {
return src(file)
}))
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(dest(files.jsDstPath));
}
function watchTask(){
watch(files.jsSrcPath, jsTask);
}
exports.default = series(
jsTask,
watchTask
);
There's something internal here going on, in my tests I saw the order was sometimes random, sometimes based on modification time, sometimes in order. In any case, best to use a tool to ensure our streams are always in the order we want them.
gulp-order exists for this purpose. It can take specific paths and glob syntax, which you already have, so you can re-pass that to the plugin:
const { src, dest, watch, series, parallel } = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const order = require('gulp-order'); // Added
var merge2 = require('merge2');
const files = {
jsSrcPath: [
'../node_modules/jquery/dist/jquery.js',
'../node_modules/bootstrap/dist/js/bootstrap.js',
'js/*.js'
],
jsDstPath: 'dist'
}
function jsTask() {
return merge2(files.jsSrcPath.map(function (file) {
return src(file)
}))
.pipe(order(files.jsSrcPath)) // Added
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(dest(files.jsDstPath));
}
function watchTask() {
watch(files.jsSrcPath, jsTask);
}
exports.default = series(
jsTask,
watchTask
);
Related
I have a gulpfile as below with a rollupTask. But at the last task which zipTask, it output without bundled js from rollup. The only way i found that fix this is to add wait time before the ziptask. There seems to be a fraction of delay with rollup output and the next gulp series. Is this the expected behavior or there is something that fix this without add waiting time ? Is my rollupTask is correct ? the zip tasks simply zip the output folder into a different folder. The output folder itself contain the expected bundle.
const gulp = require('gulp');
const rollup = require('rollup');
async function rollupTask() {
const rollupBuild = await rollup({
input: 'index.js',
plugins: rollupPlugins,
});
await rollupBuild.write({
file: 'bundle.js',
format: 'es',
sourcemap: true,
});
await rollupBuild.close();
}
exports.default = series(taskOne, parallel(taskTwo, taskThree, rollupTask), zipTask);
The easiest way is to use a plugin written for gulp. gulp-rollup
const { src, dest } = require('gulp');
const rollup = require('gulp-rollup');
function rollupTask() {
const options = { input: './src/main.js' } // any option supported by Rollup can be set here.
return src('./src/**/*.js')
.pipe(rollup(options)) // transform the files here.
.pipe(dest('./dist'));
}
exports.build = series(rollupTask);
On start: gulp build
How to achieve a replacing a string on a particular source file while the source files will be concatenated.
var gulp = require('gulp'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
replace = require('gulp-replace');
var config = {
cssConcatFiles: [
'one.css',
'two.css',
'three.css'
]
};
gulp.task('css-concat', function() {
return gulp.src(config.cssConcatFiles)
.pipe(replace('url\(\'', 'url\(\'../images/fancybox/'))
// I want to perform this replace to a particular file which is "two.css"
.pipe(concat('temp.css'))
.pipe(uglyfycss())
.pipe(rename('temp.min.css'))
.on('error', errorLog)
.pipe(gulp.dest('public/css/plugins/fancybox'));
});
This should work. gulp-if
const gulpIF = require('gulp-if');
gulp.task('css-concat', function() {
return gulp.src(config.cssConcatFiles)
//.pipe(replace('url\(\'', 'url\(\'../images/fancybox/'))
// I want to perform this replace to a particular file which is "two.css"
.pipe(gulpIF((file) => file.path.match('two.css') , replace('url\(\'', 'url\(\'../images/fancybox/')))
.pipe(concat('temp.css'))
.pipe(uglyfycss())
.pipe(rename('temp.min.css'))
.on('error', errorLog)
.pipe(gulp.dest('public/css/plugins/fancybox'));
});
You could use the following pipe instead of the gulp-if call:
.pipe(replace(/url\(\'/g, function(match) {
if (this.file.relative === "two.css") {
return 'url\(\'../images/fancybox/';
}
else return match;
}))
since gulp-replace will take a function as an argument and provide that function with a vinyl file reference (this.file) which you can use to test for which file is passing through the stream. You must, however, return something from the function call even when you want to do nothing - so return the original match.
I recommend using gulp-if, much cleaner in your case.
At work we used to use Ruby to compile SCSS. I had the Ruby compiler set up as a file watcher in PhpStorm, and when I edited a partial imported by another file, the CSS file corresponding to the ancestor file was updated without any fuss.
I want to get Gulp and Libsass to work the same way. Most solutions I've seen just compile all the SCSS files in a project when a single one changes, but our projects have way too much SCSS for that to be an acceptable solution.
gulp-cached seemed like a great solution to this problem. But when I use gulp-cached the CSS output file doesn't change when I edit partials, only their ancestor SCSS files.
I've seen a few SCSS dependency-graph solutions thrown around but I can't get them to work correctly or they simply don't do what I need. I've tried gulp-sass-graph, gulp-sass-inheritance, and gulp-sass-partials-imported.
Here's my gulp file
const gulp = require('gulp');
const glob = require('glob');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const cached = require('gulp-cached');
const sassGraph = require('gulp-sass-graph');
const sassGlobs = [
'./sites/all/libraries/gl/**/*.scss',
'./sites/all/modules/custom/**/*.scss',
'./sites/all/themes/{bcp_bootstrap3,gl_parent,gl_shiny,gli_bootstrap3,pru_bootstrap3,pru_bootstrap3v2,ubc_bootstrap3}/**/*.scss',
];
let sassPaths = [];
for (let j = 0; j < sassGlobs.length; ++j) {
glob(sassGlobs[j], function (er, files) {
let path;
for (let i = 0; i < files.length; ++i) {
path = files[i].substring(0, files[i].lastIndexOf('/'), '');
if (sassPaths.indexOf(path) === -1) {
sassPaths.push(path);
}
}
});
}
gulp.task('sass', function () {
return gulp
.src(sassGlobs, {base: "./"})
// .pipe(sassGraph(sassPaths))
.pipe(cached('sasscache'))
.pipe(sourcemaps.init())
.pipe(
sass({outputStyle: 'compressed'})
.on('error', sass.logError)
)
.pipe(sourcemaps.write())
.pipe(gulp.dest((file) => file.base));
});
gulp.task('watch', function () {
return gulp.watch(sassGlobs, ['sass']);
});
gulp.task('default', ['sass', 'watch']);
what I use to solve this problem is gulp-cached + gulp-dependents + gulp-filter
the key point here is gulp-dependents, it will find all the parent files that depends on the current file.
in your case, you just need:
const cached = require('gulp-cached');
const dependents = require('gulp-dependents');
const filter = require('gulp-filter');
const f = filter(['**', '!*src/partial']); //adjust this filter to filter the file you want to compile(pass to the sourcemap init method)
gulp.task('sass', function () {
return gulp
.src(PATH_TO_ALL_SASS_FILES, {base: "./"})
.pipe(cached('sasscache'))
.pipe(dependents())// this will find all parents of current changed files
.pipe(f) //exclude the partial files,get the files you want to compile
.pipe(sourcemaps.init())
.pipe(
sass({outputStyle: 'compressed'})
.on('error', sass.logError)
)
.pipe(sourcemaps.write())
.pipe(gulp.dest((file) => file.base)); // you might need to adjust the base path here, depend on your folder structure.
});
I have a gulp task which minifies CSS files and concatenates them to one file:
gulp.task('minify-css', function() {
'use strict';
var pathsToMinifyAndConcat = [
'css/index.css'
];
var pathsToConcatOnly = [
'lib/css/font-awesome-4.3.0/font-awesome.min.css'
];
var minifyFiles = require('gulp-cssnano');
var concatAllFilesToOneFile = require('gulp-concat');
return gulp.src(
[]
.concat(pathsToMinifyAndConcat)
.concat(pathsToConcatOnly)
)
.pipe(minifyFiles())
.pipe(concatAllFilesToOneFile('application.min.css'))
.pipe(gulp.dest('dist'));
});
But, if some files are already minified (like font-awesome.min.css for example), it should not be minified again - it should be only concatenated, and it should be omitted from the minifying process. Is there a way to do it without hacky solutions (I don't want to use solutions which I can't fully understand - and I'm pretty new to gulp) with preserved files order? I found a plugin to add src files in any point in the pipeline: gulp-add-src, but it seems to be inactive for a while.
There is more than one way of doing what you want. I will give you two examples.
First:
var gulp = require('gulp');
var minify = require('gulp-cssnano');
var concat = require('gulp-concat');
var merge = require('merge-stream');
gulp.task('minify-css', function() {
var pathsToMinify = [
'css/style1.css'
];
var pathsToConcat = [
'css/style2.css'
];
var minStream = gulp.src(pathsToMinify)
.pipe(minify());
var concatStream = gulp.src(pathsToConcat)
return merge(minStream, concatStream)
.pipe(concat('all.css'))
.pipe(gulp.dest('dist'));
});
In this example it is created two different streams. One is minified and the other is not. In the end these two streams are merged, concatenated and then the files are written in the disk.
Second:
var gulp = require('gulp');
var minify = require('gulp-cssnano');
var concat = require('gulp-concat');
var gulpFilter = require('gulp-filter');
gulp.task('minify-css', function() {
var paths = [
'css/style1.css',
'css/style2.css'
];
// Files to minify.
var filter = gulpFilter([
'style1.css'
],
{
restore: true
});
return gulp.src(paths)
.pipe(filter)
.pipe(minify())
.pipe(filter.restore)
.pipe(concat('all.css'))
.pipe(gulp.dest('dist'));
});
In this example, just one stream is created but the vinyl file objects are filtered by gulp-filter and just the filtered ones are minified. Then, all the files originally in the pipeline are restored with filter.restore and concatenated.
There are other possibilities, like creating two different tasks where one just minifies and the other concatenates, but with this approach you would need to write the minified files temporarily in the disk.
Late to the party, as usual, but another option would be to conditionally minify files using gulp-if. Something like this should work:
const gulp = require('gulp'),
gulpif = require('gulp-if'),
concat = require('gulp-concat'),
minifyCss = require('gulp-cssnano');
gulp.task('css', function () {
gulp.src([
'css/index.css',
'lib/css/font-awesome-4.3.0/font-awesome.min.css'
])
.pipe(gulpif(file => !(file.path.includes('.min.css')), minifyCss()))
.pipe(concat('app.min.css'))
.pipe(gulp.dest('dist'));
});
Hope this helps!
I'm currently getting into browserify. I like it so far but before I start using it I want to automate it. Gulp is the build system of my choice.
So what I actually want to do is:
Get js/app/**.js, bundle it to js/bundle/ and extract common dependencies into js/bundle/common.js. In addition uglify everything and add source maps.
Well. The gulp support for browserify kinda seems poor, at least my google researches were pretty disappointing.
Anyway. What I've got so far.
var gulp = require('gulp'),
browserify = require('browserify'),
factor = require('factor-bundle');
// ...
// gulp task
return browserify({
entries: ['js/app/page1.js', 'js/app/page2.js'],
debug: true
})
.plugin(factor, {
o: ['js/bundle/page1.js', 'js/bundle/page2.js']
})
.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest('js/bundle/'));
Well this is neither uglifying nor adding sourcemaps and much less using a glob pattern. I can find an official recipe which shows me how to use the pipe to add additional transformations like uglify. But it's only for a single file.
as an outputs parameter to factor-bundle, use streams instead of file paths. You can do whatever you want with the streams then.
var indexStream = source("index.js");
var testStream = source("tests.js");
var commonStream = bundler.plugin('factor-bundle', { outputs: [indexStream, testStream] })
.bundle()
.pipe(source('common.js'));
return merge(indexStream, commonStream, testStream)
.pipe(buffer())
.pipe(sourcemaps.init({ debug: true, loadMaps: true }))
.pipe(uglify())
.pipe(gulp.dest('js/bundle/'))
Thanks to Liero's answer, I got something very similar working. Here's the complete gulpfile:
const gulp = require('gulp');
const browserify = require('browserify');
const factor = require('factor-bundle');
const source = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('gulp-buffer');
const merge = require('gulp-merge');
gulp.task('bfb', function () {
const fejs = 'public/javascripts/' // location of source JS
const fejsb = fejs + 'b/'; // location of bundles
const modules = [ // aka entry points
'accounts',
'invoice',
'invoices',
// etc...
];
const inputs = [];
const streams = [];
modules.forEach(function (module) {
inputs.push(fejs + module + '.js');
streams.push(source(module + '.js'));
});
const bundler = browserify(inputs, {});
const commonStream = bundler.plugin(factor, { outputs: streams })
.bundle()
.pipe(source('common.js'));
streams.push(commonStream);
return merge(streams)
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
//.pipe(uglify()) // haven't tested this bit
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(fejsb));
});