- #Livereload loading scss how to#
- #Livereload loading scss install#
You may also want to consider a library like SVG For Everybody. I had to modify it a bit to point to the proper URL (MyTheme + /assets/svg/png/”), but it works fairly well. For these fallbacks, I use a script from Luke Whitehouse.
#Livereload loading scss how to#
From there, you can follow the article linked above for how to include this in your theme.
The final sprite will be saved to assets/svg as. You will notice that I passed an svgo transformation, which will automatically optimize the SVG files. svg extension, and then processing it using the svg-sprite library. Gulpfile.js gulp.task('sass', function () ) )Īs our source, we are simply looking in the ‘assets/svg/individual’ folder for anything with an. Create a new file in the root directory titled gulpfile.js and at the very top add: With that, we can finally start setting up Gulp.
#Livereload loading scss install#
The first thing we’ll need to do is install gulp-sass, a library which will compile SASS down into plain old CSS. Hopefully this will be a bit more clear as we step through.įrom here, it’s just a matter of installing the packages we need, and creating a gulp task for each one.
assets/svg/individual – Contains any SVG files I would like to use in my SVG icon system. assets/sass/ – All the other SASS files. assets/sass/style.scss – My main SASS file, which contains imports for all the other sass files. assets/js/vendor – Contains any vendor Javascript files, things like Bootstrap and Modernizr. assets/js/app – Contains all of my custom Javascript files, which gulp will combine. The other important folder is assets which includes all of my front-end files. In the root directory, we’ve already created the package.json file, and we’ll create the gulpfile.js in just a minute. You’ll notice that a lot of my decisions in gulp are dependent on this, but they can easily be changed. I just want to quickly note my folder structure. That last flag, -save-dev will automatically save this to a list of dependencies in your package.json file, so you can easily pass the directory around. When that’s finished, the last step is to install gulp locally to your WordPress theme folder. This will step you through the process of creating a package.json file. To create this file, just navigate to your theme’s directory in the terminal and run: npm init This is basically just a config file that Node uses to figure out which packages it needs to bring down and install (things like a SASS concatenate or a JavaScript linter or any number of other tools). In the root directory of your theme file, you will also need to install and set up a local version of gulp, and add a package.json file to manage your dependencies. This will ensure that you can use the gulp command from the command line. With Node installed, you can install gulp globally on your system by opening up your Terminal and running: npm install -g gulp If you’re not set up with Node yet, I’d recommend following the steps on their website (or better yet, installing Homebrew). Setting Things Upįirst off, gulp runs on top of NodeJS, and is generally operated from the command line. But by the end you’ll be compiling SASS, minifying Javascript, working with livereload and implementing a SVG icon system. My goal was to write a short introduction to how this works. For those unaware, Gulp is a slick JavaScript task runner, which can be used to concatenate JS and CSS files, lint files, and generally automate your front-end workflow. For a little while now, I’ve been using Gulp in my WordPress themes to automate my front-end workflow and add some handy helpers along the way. task 'scss', -> sass = require 'gulp-ruby-sass' pleeease = require 'gulp-pleeease' gulp. task 'coffee', -> coffee = require 'gulp-coffee' gulp. Gulp = require 'gulp' concat = require 'gulp-concat' plumber = require 'gulp-plumber' files = gulp.
0 kommentar(er)
