![]() I hope you learned something from this tutorial. ![]() The last thing we want to do is make sure that our SCSS files are compiled every time there is a change. pipe() again to send the results from the previous function into the st() function, which saves the compiled CSS files to the newly defined location.įinally, I modified the 'default' gulp task from the previous tutorial, to run our 'styles' task. If there is an error parsing the SCSS, it will let us know where the error is so we can easily fix it. The sass() function emits events if there are errors. src() into the sass() parser function to compile our SCSS to CSS. This path is relative to the gulpfile.js. In our 'styles' task, we use the gulp.src() method to pass the location of our SCSS files. For example, when we get to the point of setting up the watcher, we will reuse the sassFiles path. I defined some variables for the style paths so they can be reused as needed. Var sassFiles = 'assets/styles/sass/**/*.scss',įirst, make sure that gulp and gulp-sass are included at the top of your gulpfile.js. :Dįor the purpose of this tutorial I am assuming a project structure that looks like this. Just an FYI, if you are torn, I recommend going with gulp-sass. Note: I tried using gulp-ruby-sass at first but I could not get it to work. ![]() I'm using SCSS in this tutorial so, first, I installed gulp-sass. Once you have installed Gulp and understand the basics of creating tasks, you can start using Gulp to do real work! (If you need help installing Gulp, go back and read Getting Started with Gulp Javascript Task Runner.) In this tutorial we will use Gulp to compile SASS, SCSS or LESS to CSS, watch our files, and recompile them any time changes are detected.
0 Comments
Leave a Reply. |