![]() So yes, Gulp is extremely powerful, but you’ll have to learn how to use Gulp if you want to create your own customized build processes. If you’re crazy enough, you can even build a static site generator with Gulp (I’ve done it!). This is not a comprehensive list of things Gulp can do. This looks like a pretty good Gulp 4 starter. We’ll make some notes of that sprinkled through here to remind you. If you install Gulp 4 and try to do some of the things in this article, they won’t work. Like any major version change, APIs have breaking changes. Important Note! This article was written for Gulp 3.x, but now Gulp 4.x is out and recommended. Optimizing assets like CSS, JavaScript, and images.Reloading the browser automatically whenever a file is saved.It’s often used to do front end tasks like: Last, browser-sync tries to update the browser once the new files are available.Gulp is a tool that helps you out with several tasks when it comes to web development.The sourcemaps and finished CSS files are then written to the correct destination directory.The autoplace CSS grid option helps with Internet Explorer 10 and 11 compatibility. That CSS file is sent to autoprefixer to help with browser compatibility.In this case, it also compresses the file. The sass plugin takes the sass files and turns them into a single CSS file.This way you know where among the many sass files you have a particular line of code comes from. ![]() Start creating a sourcemap for the finished file.Capture and log any errors produced by the files (like when you forget to add a semi-colon.).Start with the source files passed to gulp.src.The styles function has the following steps When they're run, these functions take a group of files and pipe them through a variety of transformations. In this gulpfile, there are two task functions: styles and scripts. The paths object is just a convenient way of keeping track of which files we want to reference.When the code is built and sent to production, we want to make sure it at least gets minified, so we want a production configuration. When working locally, we want to use a development configuration. For now, it's enough to know that the right one is chosen based on the environment. In order to use webpack to the best of its capabilities, we split it into several files.Mostly it gets used so that we don't have to declare and keep track of every single other gulp plugin we need in the file. The pluginOpts object lets us configure the gulp-load-plugins plugin.It should not be confused with the frozen treat found in Rhode Island. The del package helps remove files and directories as part of any cleanup tasks we want to do.It lets us send files from gulp through webpack and then back to gulp. Next, webpack-stream helps integrate our webpack configuration with gulp.Browsersync helps with automatically reloading the page for the local environment when changes are made to the files we want to watch.Without it, nothing else is going to happen. Gulp is obviously the main package we need.Because gulp runs in node, we can require javascript packages and files to use within the gulpfile.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |