![]() Var settings = ) SVG Tasksįor my SVGs, I’m again using gulp-tap. One of the things I had someone specifically point out about my setup is the use of a settings variable. You don’t have to wait for all of the parts to finish to start on a task.Īlright, without out of the way, let’s dig into my setup. ![]() Loading does not necessarily mean downloading from the internet, it could also mean reading data from disk or from a database.įrom what I understand, this is part of what makes Gulp renders so fast. You can start consuming data while the data is not fully loaded, but every chunk of loaded data is given to you immediately after it is loaded and you are not currently processing the previous chunk. Streams in Node.js work a lot like streams work on YouTube. Gulp did not invent streams, they are part of Node, but it standardizes them for build systems in a way that code from different authors can work together without knowing about each other. The biggest “different from regular JavaScript” thing about Gulp.js that I still kind of struggle with sometimes is the concept of streams.įlorian Eckerstorfer does a nice job explaining it, though. I’m not super comfortable with some of the nitty gritty aspets of Node itself, but if you know JS, a lot of the basics of Gulp can be a bit easier to pick up. One of the things I personally love about Gulp is that it’s JavaScript powered by Node. Hopefully you can, too! Gulp is JavaScript I learned by reverse-engineering a lot of this stuff. This article is a bit on the long side already. Note: I’m not going to get too detailed about each package in each task and what it does. If you missed it in yesterday’s article, here are my gulpfile.js and package.json files. So, that’s what we’re going to talk about today. We have added: gulp.After Wednesday’s article on how I setup my JavaScript projects, I had a few folks ask me for more info about my Gulp.js setup. The two var definitions are the same as last time, as is the minify-css task. 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. Gulp Watch Exampleĭid you know, Apple got their idea for the Watch from Gulp. 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. In the first video we saw how easy it is to get started using Gulp.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |