Server filewatcher to recompile sass install#

nodemon is a thing we’ll use to watch for changes on our scss files.node-sass is that thing gulp-sass uses to compile your scss files to css files.-D flag is another way of saying “write these node_modules into my package.json under devDependencies” (go look at your package.json).

Server filewatcher to recompile sass install#

Let’s install our dev-dependencies: $ npm install -D node-sass nodemon This section will probably be the simplest example for understanding npm scripts so let’s diiiiive in. In this section, I’ll show you how I made a simple sass compiler and watcher without using gulp.js and only using npm scripts. When I started playing around with npm scripts, my original intention was to stop using gulp and try to write everything I needed using things like node-sass, autoprefixer, and browsersync without their respective gulp tasks. Now your file structure should look like this: If me or anyone else needs to clone my repo, I usually tell them to npm install based on the packages in package.json. I like to tell GitHub to ignore my node_modules folder. (optional) .gitignore is a hidden file we use to tell GitHub what files and folders to exclude from our repo.main.scss is where we will write out scss code.

Now let’s create some files: $ touch scss/main.scss. bin folder is where we are going to put a command line script to compile our scss files.public folder is where I keep all my static assets, inside I have a css folder for my css files.scss folder is where I like to keep all of my scss files and directories.Create these folders: $ mkdir bin public scss & mkdir public/css $ mkdir portfolio & cd portfolioĬreate a package.json file and follow the prompts. Open terminal and create a new folder for our project. If you want more details on installing Node.js, check out this article from Treehouse. If you’re on a Mac, I recommend installing Homebrew, a package manager for mac.Īfter installing this, you can install Node.js by doing: $ brew install node You need Node.js installed on your computer. Watch for changes on your scss files and trigger a re-compile.Have you ever wanted to write a single starting command for your app?īut I want this article to be a baby first step into showing how npm can be an asset pipeline and build tool by enabling you to do two things:

However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here.I build a lot of websites and simple prototypes using Node.js and Sass.īoth of them are great for what I do at work and for my own side projects. If you use Node.js, you can also install Sass using npm by running npm install -g sass That’s all-there are no external dependencies and nothing else you need to install. Learn More About Sass Install Anywhere (Standalone) You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH. If you're brand new to Sass we've set up some resources to help you learn pretty darn quick. You can also run sass -help for more information about the command-line interface. For example: sass source/stylesheets/index.scss build/stylesheets/index.cssįirst install Sass using one of the options below, then run sass -version to be sure it installed correctly. When you install Sass on the command line, you'll be able to run the sass executable to compile.