In this chapter, we are going to create a simple Gulp build, watch and live-reload process. Of course, there’s still way more to Gulp than what was covered in these two tutorials, but with this knowledge you can go ahead and figure out what other gulp plugins might be great to add to your workflow.Many tasks that we perform as developers are repetitive and dull, so why not automate them?! There are a handful of common automated task runners for this course, I have chosen Gulp.Īccording to, "Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something."
GULP WATCH NEW FILES HOW TO
You’ve learned how to set things up, how to write a gulp task, use gulp plugins and find more information on each plugin you use. These two articles would have taught you the very basics of Gulp. task ( ' sass ', function () )īrowser Sync provides lots of options to configure, if there’s something you want to do, but isn’t covered in this article, you might want to try looking at the documentation directly. Here’s how we can modify the sass task to include globbing: gulp. If that’s true, you can also use the +(|) pattern to allow Gulp to match files ending with both. You might also have a mix of files ending with. Let’s see how to place globs into these methods in our current sass task.įirst of all, we may need to compile more than one Sass file into CSS within the app/scss folder. We can use these globbing patterns in 3 different gulp methods. In this case, Gulp will match any file ending with.
GULP WATCH NEW FILES PLUS
*.+(scss|sass) - The plus + and parenthesis () allows Gulp to match multiple patterns, with patterns separated by the pipe | character.In this case, not-me.scss would be excluded from a match. !not-me.scss - The ! indicates that Gulp should exclude the pattern from its matches, which is useful if you had to exclude a file from a matched pattern.scss in the root folder and any child directories. **/*.scss - This is a more extreme version of the * pattern that matches any file ending with.In this case, we’re matching any files ending with. *.scss - The * pattern is a wildcard that matches any pattern in the specified folder.Most workflows tend to only use these 4 different globbing patterns. Once the pattern is identified, we say that it is matched. The idea of a glob is similar to that of a regular expression, where you check if a file name has a specific pattern. You’ll need to use a glob, a matching pattern for files, to watch more than one file. We’re building up on what we have made previously.Ī key thing about build workflows is that you’ll often need to watch more than one file. Make sure you’ve checked out the first article before continuing on to this article. The latest version can be found here Before you read this article
In this article, we’re going to dive further into the sass task to find out how to watch more than one file for changes, and how to customize options for the plugins that we have used. We also touched on how to watch the styles.scss file for changes and how to reload the browser automatically with Browser Sync. Last week, we set up a simple gulp task to convert Sass into CSS.
0 kommentar(er)
