I am trying to set up a similar process to what Web Essentials offered in the old visual studio in the newest one. For those of you who aren't familiar with how that worked, the process was:
File Setup:
a.less
a.css
a.min.css
a.css.map
b.less
b.css
b.min.css
b.css.map
So basically when you open a.less and start editing it, it would automatically check out a.css, a.min.css, and a.css.map as well. Then when you save, it would recompile the 3 sub files as well as saving the less file.
I am able to replicate this by writing a separate task for each file like so:
gulp.task('checkout', function () {
return gulp.src('Styles/brands.css')
.pipe(tfs());
});
gulp.task('less', ['checkout'], function () {
del('Styles/brands.css');
return gulp.src('Styles/brands.less')
.pipe(less())
.pipe(gulp.dest('Styles'));
});
This uses gulp-tfs-checkout to checkout the sub file, and then the less to compile. This works 100% how I expect it to. I can set up a watch to watch the less task and everything will work great. The only problem is, how do I expand this to handle all my less files in that folder? I could write separate checkout and compile tasks for each file, but that's not really ideal.
I am used to writing projects where saving any less file compiles and concats all of them into a single or a couple files, but this is a work project and for multiple reasons I need to keep the css files separate as they are now. We use visual studio's bundling, but its an older project and people have referenced the css files randomly outside of the bundling process so it would be a pretty big/risky task to change that.
I don't know how to watch many files, but only change the current one if that makes sense.
gulp.task('less', function () {
return gulp.src('Styles/*.less') //watch all of my files
.pipe(tfs())//checkout only the css file for the less file that was changed here somehow
.pipe(less()) //compile only the css file that was changed
.pipe(gulp.dest('Styles'));
});
I am fairly used to grunt and gulp, but like I said I generally do things in bulk on my project. I'm not sure how to do this when I want to watch all the files, but only change 1
Why don't you create all those tasks per each file dynamically? You can read the contents of the folder where your less files are with fs.readdirSync and then if the file is a less file you create for each the task 'checkout' + filename and then 'less' + filename.
Being dynamically you will not have any problems when you create a new less file or when you remove one.
Related
I was already successful to automate my build commands inside the "tasks.json" file. But sadly "tasks.json" or vscode does not offer an option to set custom environment variables (which would be a really really really nice and needed feature).
I don't want to change a couple of lines just to specify the program which I want to build (there are a couple in this project). I was able to do a workaround and set an windows environment variable, but for this workaround I need to restart vscode if I change the environment variable.
Therefore I tried to use GULP-Task to start my build process, because with gulp task I set file global variables. I was already able to get my tasks running in gulp, but with gulp tasks I don't see the progress of my building task in the output sequentially, I just get the output when he is finished in a big "blop".
I tried a couple of things, like piping, writing to file (this worked sequentially), but the output on the output-window is still displayed as a "blop". Therefore I want to ask if it is possible to get an sequential output of my running task with gulp?
This is how I start my build task:
gulp.task('BuildDebug', function (cb) {
exec(buildCommand + debugCommand, function (error, stdout, stderr) {
console.log(stdout);
console.log(stderr);
});
});
I'm using gulp to convert markdown files to HTML, and using the gulp-watch plugin (not the gulp.watch API function) to rebuild files if they change. Works great!
gulp.task('markdown', function () {
gulp.src('src/**/*.md')
.pipe(watch('src/**/*.md'))
.pipe(markdown())
.pipe(template('templates/md.tpl'))
.pipe(gulp.dest('dist'));
});
The problem is that the pipeline src is the markdown files, but within the pipeline I also reference a template file. If that template changes, all the markdown files need to be rebuilt. Is there a way to express that dependency in gulp/gulp-watch?
I tried using gulp.watch (the API function) to watch the template and run the 'markdown' task if it changes ...
gulp.watch('templates/md.tpl', ['markdown']);
... but that didn't work. Nothing happens. I assume having gulp-watch in the pipeline prevents it from doing anything.
I guess I could create a two tasks, one with gulp-watch and one without, and use the one without to force a full rebuild. I'd rather not, because then it becomes an ongoing problem to keep the two in sync.
Is there a better way?
I guess I could create a two tasks, one with gulp-watch and one without, and use the one without to force a full rebuild. I'd rather not, because then it becomes an ongoing problem to keep the two in sync.
Remember, gulp is just JavaScript.
Simply write a function that constructs the stream with or without the watch() step depending on a parameter that you pass. The gulp-if plugin let's you write something like this in a very concise way (although it's not necessary and could be done without it).
Here's how I would do it:
var gulpIf = require('gulp-if');
function processMarkdown(opts) {
gulp.src('src/**/*.md')
.pipe(gulpIf(opts.watch, watch('src/**/*.md')))
.pipe(markdown())
.pipe(template('templates/md.tpl'))
.pipe(gulp.dest('dist'));
}
gulp.task('markdown', function() {
processMarkdown({watch: true});
watch('templates/md.tpl', function() {
processMarkdown({watch: false});
});
});
You can specify gulp src as an array, too:
gulp.src(['src/**/*.md', 'templates/md.tpl'])
I have a Jekyll site which is part of a Gulp project, using BrowserSync to preview the site as it is built. One of my watch statements looks for changes to the html in order to auto-refresh the site.
gulp.watch('docs/_site/**/*.html').on('change', browserSync.reload);
Works as designed.
However, when I update header.html (or any other shared file) the browser is refreshed multiple times because all the pages changed. This makes sense, since all the static pages are being updated. But I'd like to prevent this when updating a shared file.
Is there a way I can tell Gulp/BrowserSync to only refresh once when a shared Jekyll file is updated?
UPDATE
My watch set looks like the following:
gulp.task('dev:watch', ['browserSync', 'docs:sass', 'docs:lib', 'docs:build'], function () {
gulp.watch(['scss/**/*.scss', 'docs/assets/**/*.scss'], ['dev:sass']);
gulp.watch(['docs/**/*.html', 'docs/**/*.md', '!docs/_site/**'], ['docs:build']);
gulp.watch('docs/_site/**/*.html').on('change', browserSync.reload);
});
The docs:build task:
gulp.task('docs:build', function () {
browserSync.notify('Building Jekyll');
return spawn('jekyll', ['build', '--config', '_config.yml,_config_dev.yml', '--incremental'], {stdio: 'inherit'});
});
# Edit after your question edition :
Changes in _site are consequences of dev:sass or docs:build tasks, so, you can call browserSync.reload from inside those tasks. You will then be sure that it append one time only.
# End edit
So, you're watching a watched process.
You have a jekyll serve running, which by default is watching any change at the root and that fires a generation for all files including "_includes" files.
For an _include file change, you can have 10 pages + 10 posts + 10 collections items = 30 refreshed pages in _site folder, which leads to 30 gulp.watch updates fired.
You'd better watch basic jekyll files and folder for change with :
gulp.watch(
['*.html', '*.md', '_includes/*.html', '_layouts/*.html', ...other files],
browserSync.reload()
);
and even add a reload delay to allow jekyll take time to regenerate a big site and reload after a descent time :
browserSync.reload({reloadDelay: 5000})
This is a bit of a weird one:
I've got a gulp task that looks like this:
gulp.task('less', function () {
gulp.src('./less/main.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [cleancss]
}))
.pipe(sourcemaps.write()) // will write the source maps to ./public/assets/css-dist/maps
.pipe(gulp.dest(paths.public + 'css/dist'));
});
I'm running this task from inside a play 1.3 project, and it generates the base64-encoded inline sourcemap, as expected, but when I load it up in chrome, all of the styles are mapping to line 1 of main.css, indicating that something is wrong.
Now, here's where it gets weird: if I run this same task, pointing at copies of the same files, in another project with an identical directory structure, just running under plain-ol' apache, it works exactly as expected. The output files appear exactly the same.
Does anyone have any insight as to why this would be?
FWIW, an extremely similar scenario plays out when minifying and concatenating my js, using gulp-uglify and gulp-concat
Try see if you can visualize the difference/mappings via this visualizer tool. If both compiled files are exactly the same between the two projects then it's likely due to the different ways you are serving/accessing the files? With the 2nd project did you also try to view the sourcemap via Chrome?
Just to clarify, not only are you writing an inline sourcemap, you're also embedding your sources so everything is within the compiled .css file, the external original source files are not the referenced source(sourceRoot will be /source/).
Is there a simple HTML preprocessor available to use for existing HTML code, that I won't need to modify my existing html to conform with preprocessors syntax?
I'm developing a mobile app with a few pages built with html, however i've started having the problem of having to update each page for when making changes to similiar content (header, footer etc) I don't want to duplicate content and have mismatches, rather i'd like to use a preprocessor that has an include method (something like how php does it), so that I can include these similiar contents.
I've looked at stuff like HAML & Jade, but it seems they have a strict syntax you need to follow with indents and the sort or editing html to include pipes on each line, else things wont compile.
Like I said I have existing html I would just like to cut & paste my HTML into different files, include them and stick with that workflow as I think it's the simplest.
But if anyone has any other ideas how I can tackle my situation that is welcomed too.
I guess since your requirement is to only include files that you don't need a full blown template system . You could take a look at gulp-include which is a gulp plugin to include files. Using gulp has the advantage that gulp comes with a watch feature to watch the file system for changes - whenever a change is detected a task can be triggered.
An example how your gulpfile.js could look like
var gulp = require('gulp');
var include = require('gulp-include');
gulp.task('template', function() {
return gulp
.src('*.html')
.pipe(include())
.pipe(gulp.dest('dist'))
});
gulp.task('dev', function() {
gulp.watch('*.html', ['template']);
});
gulp.task('default', ['template']);
This gulpfile registers a 'template' task that takes all html files and processes the file's contents with the gulp-include plugin. The template task is registed as default gulp task. So if you invoke gulp without any command line args then the template task is run. The gulp 'dev' task allows you to run gulp dev from the command line that watches all html files for changes and triggers the template task whenever a html file changes.
The gulp include plugin scans your html files for something like
= include relative/path/to/file.html
and includes 'file.html' contents.
The include syntax is quite well documented on the gulp-include web site.