I am using gulp 4 to process various css, js and mjml files which are triggered using gulp.watch to process files on save and everything is working in terms of that specific file being processed on save. What I have not been able to get working is having a save trigger processing of different files than the file that was saved.
Scenario: I have mjml files in a src/templates directory. Those file have mj-include tags which import files from src/templates/includes directory. When I save a file in the src/template/includes directory, I want gulp to process all the src/templates/*.mjml files. This way any change to a child file will trigger processing of all possible parent files to ensure the change is incorporated.
All of my doc reading and googling hasn't turned up solution.
var paths = {
mjmlincludes: ["src/templates/*.mjml"],
mjmlincludeswatch: ["src/templates/includes/*.mjml"],
mjmlincludesoutput: "src/templates/html/",
};
function mjmlincludesconvert() {
return gulp.src(paths.mjmlincludes).pipe(mjml()).pipe(gulp.dest(paths.mjmlincludesoutput));
}
function watchFiles() {
gulp.watch(paths.mjmlincludeswatch, mjmlincludesconvert);
}
const watch = gulp.parallel(watchFiles);
Related
I'm using gulp compileHandlebars to compile my handlebars templates and create a page using json data and that's working great... Problem is I want to nest my handlebars templates in subdirectories but when I do this the batch process cant find the templates anymore after I add: **/*.handlebars to the batch path. See below:
gulp.task('compileHandlebars', function () {
delete require.cache[require.resolve('./src/layout.json')]
var buildSettings = require('./src/layout.json');
var templateData = buildSettings,
options = {
batch : ['./src/assets/templates/**/*.handlebars']
}
gulp.src('./src/index.handlebars')
.pipe(handlebars(templateData, options))
.pipe(rename('index.html'))
.pipe(cleanhtml())
.pipe(gulp.dest('./dist'))
.pipe(livereload());
});
The docs on npm say that batch requires an array of file paths but the example shows an array with a directory path. Your example is using blob syntax which won't work. It doesn't look like that batch will recursively look into sub-directories either... so I think you will have to make an array that includes a parent directory path for each handlebars file.
Its a bummer, I know. But you could probably automate the process of retrieving the handlebar file paths using gulp-filenames and slice off the filename from each path to get an array of directories.
I have lots of .jade, .styl and .coffee files resided in different subfolders.
I’d like to compile only changed files when they are changed.
I’m using gulp and I’ve come up to the following pattern:
var watch = require('gulp-watch'),
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path)
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'))
However this pattern stores compiled file into the root of ./app folder, but not to the folder where the source file resides.
I’ve tried lots of stuff and all in vain.
The problem is that there is a lack of documentation and samples for gulp-watch and others.
Could anybody tell me how to store compiled file to the its source’s folder?
The problem is that you pass e.path (i.e. the full path of every changed file) as a glob pattern to gulp.src(). This means that your glob pattern does not actually contain a glob (like * or **), in which case the directory where the file is located is used as the default value for the base option to gulp.src(). When the files are then written with gulp.dest() that base option causes the entire directory structure to get stripped.
The solution is to use the streaming variant of gulp-watch instead of the callback variant ...
gulp.src('app/**/*.styl')
.pipe(watch('app/**/*.styl'))
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
... or provide an appropriate base option to the callback variant:
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path, {base: 'app'})
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
});
In gulp I want to deal with some files but I do not know all of the files I want to deal with at the time I write gulp.src([...]). I can only know some files at that time and other files I want to deal with depend on the known files dependencies. My question is is there a way that can add the source file in the middle of pipe? Pseudo code:
gulp.src([some files I already knew]).pipe(gp_tap(function(file){
// some actions;
// get file dependencies
// Here I want to add the dependencies as the source file
}))
I am trying to load a file called styles.css which is located in
~/Content/css/styles.css
What I tried is adding it to the _Layout page
<link rel="stylesheet" href="~/Content/css/styles.css" />
This gives a 404 on that location.
I like the way how bower handles external libraries and gulp magically does all the other stuff like minifying a file when I request a minified version, but through all this newness I cannot add a simple static file of my own.
Could someone be so kind to help me reference my own styles.css file?
Joe wrote in his answer:
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot.
To elaborate on this:
In Gulp there are four APIs, being:
gulp.task: Define a task
gulp.src: Read files
gulp.dest: Write the files
gulp.watch: Watch the files
To write files from example CSS files from a source to a destination (what I wanted to do), you can define a task as follows:
var gulp = require('gulp')
var paths = {
webroot: './wwwroot/',
cssContent: './Content/css/**/*.css'
};
paths.jsDest = paths.webroot + 'js/';
paths.cssDest = paths.webroot + 'css/';
gulp.task('build:ccs', function () { // Define a task called build.css
console.log('Building Cascading Style Sheets...')
gulp.src(paths.cssContent) // Look for files in the source.
// Do optional other stuff
.pipe(gulp.dest(paths.cssDest)); // Put it in the wwwroot.
});
All this will do is move files from the gulp.src cssContent (my local directory) to the gulp.dest cssDest (the webroot).
To run this before every build specify this go to "View > Other Windows > Task Runner Explorer", right click on the task that appeared called build:ccs and select "Bindings > Before Build".
You can do a lot more with Gulp like minifying, combining, analyzing, adding references to file, but these are the basics.
Note: I learned the above from JavaScript Build Automation With Gulp.js on Pluralsight.
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot
My default task is to execute the "step2" task, which depends on step1. Step1 copies over a bunch of files, step2 is supposed to rename a single file, "file1.txt". My default task says to just do "step2". I am using gulp-rename.
gulp.task('step1', function() {
var files = [
'./folder1/**/*.*',
'./file1.txt'
];
return gulp.src(files, {base: "."})
.pipe(gulp.dest("./build"));
});
gulp.task('step2', ['step1'], function() {
gulp.src('./build/file1.txt')
.pipe(rename("./renamed-file1.txt"))
.pipe(gulp.dest("./build"));
});
The problem is I don't see a renamed file at all, and instead I see both the copy of the file I copied over and the renamed file. How do I fix this?
Also, why is it that for "./renamed-file1.txt", I have to specify it that way to ensure it gets in the build directory as opposed to ./build/renamed-file1.txt?
The gulp-rename plugin renames the files in the stream not the ones in the file system: I guess you should split your step1 in to 2 gulp flows renaming your file while copying it.