Watching file changes with npm scripts
at mikej.codes▼2 up and 0 down, posted by
2 up and 0 down, posted by
"task runners like Grunt and Gulp are just wrappers for existing CLIs" I can't say I agree with this. Actually, all the arguments about replacing task runners with npm always failed to convince me. There are several plugins that simply don't even have a CLI, to begin with. Basically, your suggestion is to write a js file to replace their behaviour and run node on them. You ended up writing 27 lines of code to do something that gulp.watch does in a couple, and better. Without spawning new processes, either. The argument "npm vs. task runners" works better against Grunt, anyway. We know that Grunt is slow, is verbose, has a config system that quickly becomes unmanageable. Gulp, on the other hand, does not. Gulp has a declarative approach for its tasks, and a procedural one inside them. It's clear and works beautifully. Moreover, the adoption of vinyl files has great advantages in terms of speed (since all operations happen in memory, and don't write a temp file each time) and it's also great for mocking files. And while it's true that streaming mode doesn't work for all plugins, at least it does for some. The procedural style allows me to do some computations, if necessary, even if it's a simple `if`. Doing the same with a npm script ranges from being impossible to being awkward. Setting the configuration for a plugin can usually be done with a POJO that I can indent as I wish; doing the same with the CL is ugly, as I have to do it in a single line (thanks Crockford that didn't allow multiline strings in JSON). Piping results to another operation is damn simple with Gulp, while I have to append everything in the same line with && using commands. "pre-" and "post-" scripts mitigate the problem only partially (basically it's splitting the command in 3 parts). Error handling can be better, but at least is there and it's flexible. I tried the "npm scripts" approach in the past. It started nice, it ended up an unmaintainable mess. Maybe it's because I'm kind of used to Gulp, who knows. But once I had a task that sounded like: "Take the images in that folder, create multiple versions of them according to the spec in that json file, optimize the results and put them in their correct folder." I have no idea how to do this in a command, except for creating a js file for it - something that I did NOT want to do. I fail to see what's the problem in including Gulp in the build workflow. It's a dev dependency, it won't bloat your final result. It's also relatively small - I'm way more worried about the size of Angular 2, for instance.
If those are the reasons, I'm even less convinced to switch to npm scripts. Copying files is as easy as gulp.src(toBeCopiedGlob) .pipe(gulp.dest(destDir)); For the rest, Gulp tasks are just JavaScript functions. You're not actually forced to use gulp.src or any other method. You can start shell scripts, you can spawn servers, command livereloading, perform computations and evaluate conditions, etc. and, above all, you have a direct connection with the underling JavaScript application, as you can actually import its modules. In addition to this, I have a consistent interface in which I can define parameters and help texts, and that's definitely a plus for anyone who's looking at the project's tasks for the first time.