For more information about how to use this package see README. The two var definitions are the same as last time, as is the minify-css task. Auto generate import-only files for any file type. Ok, nothing super crazy going on here, but let's step through it anyway. Var minif圜ss = require('gulp-minify-css') Let's build on the example from the previous video by adding a watch tasks: // project_root/gulpfile.js Lies aside, gulp.watch is incredibly powerful and useful. If the task doesnt signal Async Completion, it will never be run a second time. It watches for changes to files that match the globs and executes the task when a change occurs. Gulp Watch Exampleĭid you know, Apple got their idea for the Watch from Gulp. The watch () API connects globs to tasks using a file system watcher. After that, it does its thing with no further attention needed. I say 99% / almost, and that's because we must start Gulp initially. We have all these cool time saving tasks happening for us with almost no effort. This is where Gulp starts to get really powerful. When Gulp spots a change it will re-run the tasks we tell it to run. css files for example - or entire directories, or any combination you can think of. We can tell Gulp to watch for changes to specific files, or every file with a specific extension - all. Instead we want Gulp to do 99% of the work for us. We don't want to have to be swapping back and forth between our console and our IDE, jabbing at the up arrow then stabbing return each and every time we make a change. Now let's make our lives even easier with this Gulp Watch example. ReportChange is just a method that prints the changed files onto the console.įor the new task, you additionally need to require the installed gulp-watch package.In the first video we saw how easy it is to get started using Gulp. We are using browserSync, so the page reloads automatically as soon as a changed was detected, so the task before looked like this: gulp.watch (paths.source, function () ).on ( 'change', reportChange ) The API´s of gulp.watch and gulp-watch are looking somehow different and so it needed a little time to find out, how to exactly refactor the task. To be more common and has a lot more of stars, contributors and forks on Gitub then gaze. I can´t tell why chokidar exactly worked better for us but chokidar seems Gaze whereas uses globbing, fs.watch and "the best out of other libraries". The main difference between these two is that gulp.watch uses gaze for implementing the whole watch functionality andĬhokidar is using a combination of Node.js fs.watch, fs.watchFile and the Maybe there are other optimizations that would have solved the problem, but to just change from gulp.watch to gulp-watch was a pretty easy solution and the main work was research. Gulp-watch plugin which brought a huge speed improvement. We were using the built-in gulp.watch and the solution for us was to just replace it with the It was nearly impossible to continue working with this, so I searched for a solution. Somewhen our gulp watch task started to be very slow and to need round about 2 minutes to ramp up (initial gulp watch call)Īnd more than 8 seconds for a refresh when edited a single file. I am currently working on a big project, meaning that we have a lot of files that needs to be watched.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |