#Gulp sass minify css how to
#Gulp sass minify css install
#Gulp sass minify css code

An output file: what we want coming out of the pipeline.Īdd this code to your gulpfile.js and save it.Ĭonst prefix = require('gulp-autoprefixer') Ĭonst minify = require('gulp-clean-css').

A series of actions to take on the inputed files: we’ll apply our four plugins to the inputed files.A file or files to put through our pipeline: in our case, I’ve got my scss file at /src/css/*.scss (the asterisk tells Gulp to put every scss file from that directory through the pipeline).

A gulp task (which takes the following items…).Dependencies: in our case, gulp and our plugins.You need to provide two things in your file: In the root of your website directory, add “gulpfile.js” as a new file.

#Gulp sass minify css install

Notice the 'browserlist' config at the top for the autoprefixer plugin adn the devDependencies generated by the install code above. Your package.json file should now look like this. npm install gulp-clean-css -save-dev Install the Rename plugin This plugin minifies your CSS to help your code load faster. I’ll show you an example of my completed code below. Add it just before the “scripts” section in the package.json file. It tells the autoprefixer plugin how far backwards it should make your code compatible. Important! In order for this plugin to work correctly, you also need to add the following to the top of your package.json. This plugin adds backwards compatibility for older web browsers to your CSS. npm install gulp-sass -save-dev Install the Autoprefixer plugin This plugin compiles your SCSS or SASS into CSS. Install them one after the other, using the following commands: Install the SASS plugin For the workflow I’m showing you, you’ll need four plugins.

Install Gulp Plugins.Īs I mentioned above, Gulp has thousands of plugins. This installs Gulp locally and adds it under devDependenies in your package.json file. When you type your password in, it won’t look like it’s registering your keystrokes, but that’s a security feature. Note: If that doesn’t work, you may need to run it as sudo npm install gulp -g and enter your password. You need to install Gulp both globally and in your website’s directory. Just hit the Enter button on your keyboard until it finishes and creates a package.json file. This will prompt you with a series of questions. The file essentially tracks your node dependencies. With NodeJS installed, cd to your directory and create a package.json file. Create a package.json file in your directory. If you don’t have it installed go to, download, and install NodeJS. If you get a number back, that means you have NodeJS installed. To check to see if you have NodeJS, open Terminal and type the following command: node -v

#Gulp sass minify css how to

There are thousands of plugins (and I’m just figuring out how to use them), but this post will show you to compile and minify SCSS or SASS with GulpJS. When it finishes, your finalized code exists the pipe. Very simple put, you feed files into one end of the pipeline and then give it a series of automations to run in a sequence. It’s a command line utility for NodeJS that automates workflows. While the general workflow is efficient and simple, I wanted to add a few elements and stumbled upon GulpJS. I’m new to the web development world and the simplicity of Hugo has been a big advantage.Īs I’ve learned SCSS, I’ve been using Live Sass Compiler, the Visual Studio Code plugin. I’ve been working with Hugo, the static site generator, for a few months now.