Otherwise, I just run it through gulp-svgmin to remove some of the junk that often gets added by the software used to create them. If the item in the stream is a folder, I grab all of the SVGs in it and use gulp-svgstore to create an SVG sprite. 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. When changes occur, new files will automatically be compiled. 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. Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel. 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. npm install -save-dev browserify tsify vinyl-source-stream. vinyl-source-stream lets us adapt the file output of Browserify back into a format that gulp understands called vinyl. tsify is a Browserify plugin that, like gulp-typescript, gives access to the TypeScript compiler. So, that’s what we’re going to talk about today. First, install browserify, tsify, and vinyl-source-stream. You can find the full code as an example on my git repo.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. In the last article we ended up with gulpfile.js that looks like this const = require("gulp") Ĭonst cleanCSS = require("gulp-clean-css") Ĭonst liveReload = require("gulp-livereload") Įfault = series(minif圜SS, minifyJS) we agree that to access a task we either run gulp for public tasks or just gulp to run the default flow.īut to be honest, it's a little bit tedious to run the command every time we modify a file, whether it's a big or a small change, don't worry gulp has an easy way to keep watching for files changes and run any task you specify. In the previous article, we talked about gulpjs and we managed to create a couple of gulp tasks.
0 Comments
Leave a Reply. |