var paths = {
css: "css/**/*.{scss,sass}",
js: "js/**/*.js",
other: ["fonts/**/*.ttf", "images/**/*.{gif,png,jpg}", "includes/**"]
}
I can run
gulp.watch(paths.css, css); //compile sass and copy to template directory
gulp.watch(paths.js, js); //compile js and copy to template directory
gulp.watch(paths.other, copy_other); //when something changes in these, copy to template output directory
But that doesn't remove deleted files from the template output directory. When I remove lets say js/test.js it just compiles all js and copies them to output but doesn't remove test.js from template output directory.
I want to have an additional watch thread looking for deleted files in every path of the given path json object
gulp.watch(paths).on("unlink", function(path) {
delete(path);
}); //delete() takes filename and deletes it in template output directory
Doesn't work because watch expects a string not a json object:
TypeError: expected a string
Just using cwd()+"/**" complains about too many files.
Error: ENOSPC: System limit for number of file watchers reached...
Related
I am a newcomer to Gulp. I have a gulp file and I am running one task in it -
gulp.task('sass', function () {
return gulp.src('app/scss/**/.scss') // Get source files with gulp.src
.pipe(sass()) // Sends it through a gulp plugin
.pipe(gulp.dest('app/css')) // Outputs the file in the destination folder
});
in the above code what i want to do is:
I have four scss files in app/scss folder:
site1.scss
site2.scss
site3.scss
copy.scss
Now i want to run the sass task and have all the files in scss folder excuding one particular file 'copy.scss'. I don't want the 'copy.scss' file to be converted into css file.
How do I do it?
Any help would be apprecisted
Try
return gulp.src(['app/scss/**/*.scss', '!app/scss/**/copy.scss'])
Note the ! It allows you to negate or remove from the stream a file or files. Also note I added a * to your *.scss
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'));
});
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
I have following directory structure:
common
-services
--service1.js
--service2.js
-app
--gulpfile.js
--src
---services
----service1.js
----service3.js
I want to made gulp task that will take all files from common directory, take files from app directory and replace all files with same filenames in original stream. After that I will concat it and write to other directory.
I tried this:
var gulp = require('gulp'),
merge = require('gulp-merge'),
concat = require('gulp-concat');
gulp.task('templates', function () {
return merge(
gulp.src(['../common/**/*.js']),
gulp.src(['src/**/*.js'])
)
.pipe(concat('app.js'))
.pipe(gulp.dest('build/js'));
});
I expected to got content of common/services/service2.js, app/src/services/service1.js, app/src/services/service3.js in dest/app.js.
But instead I've got content of all files.
I tried to change cwd or base of gulp.src, but it has no effect.
I know that I can write this stream to tmp directory, and after that get files from it, but it seems not really like gulp-style solution. So how can I overwrite files with same file names in streams?
Ok, i can't find any existing solution for that, so I write my own gulp plugin: gulp-unique-files.