I know about Sass and Gulp and their benefits, but I have no idea how to actually use them

Question

Obviously, I know they require git, but that's where my knowledge ends.

Say I have a .scss file I have edited and I want to compile it and place it on my remote server to see how it looks. What now?

There is very little information on how to actually do this. Same with Gulp.

I feel I am missing some kind of middleman here.

Can anyone point me in the right direction?

Answer 1

1. Install Node.js
2. Install Gulp globally with npm install gulp-cli --global
3. Make a new directory for your Gulp tasks and Sass files
4. Inside that folder initialize npm with npm init
5. Install Gulp and Sass with npm install gulp gulp-sass --save-dev
6. Create a gulpfile.js with the following content:

var gulp = require('gulp')

var sass = require('gulp-sass')

gulp.task('scss', function() {
  gulp.src('scss/main.scss')
  .pipe(sass())
  .pipe(gulp.dest('./build/css'))
})

gulp.task('default', ['scss'])

gulp.task('watch', function() {
  gulp.watch('scss/**/*.scss', ['scss'])
})

7. Create a folder called scss with a file called main.scss
8. Now you can build it with gulp and watch it with gulp watch

---

I recommend you to also use PostCSS with cssnext for autoprefixing and gulp-clean-css for minifying your CSS. For using that you have to do the following things:

1. Install them with npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
2. Change your gulpfile.js to the following:

var gulp = require('gulp')

var cssnext = require('postcss-cssnext')
var cleancss = require('gulp-clean-css')
var postcss = require('gulp-postcss')
var sass = require('gulp-sass')

gulp.task('scss', function() {
  gulp.src('scss/main.scss')
  .pipe(sass())
  .pipe(postcss([cssnext()]))
  .pipe(cleancss())
  .pipe(gulp.dest('./build/css'))
})

gulp.task('default', ['scss'])

gulp.task('watch', function() {
  gulp.watch('scss/**/*.scss', ['scss'])
})

---

I also recommend you to read this to learn about the Sass bascis.

Answer 2

There are some websites which have videos on how to use various web development components. Here is an alphabetized list of places, where one can watch a series of videos on various programming subjects:

1. https://www.codeschool.com
2. https://www.lynda.com
3. https://www.khanacademy.org
4. https://www.youtube.com (Simply search for Git or Gulp, Web Development, etc...)

For Git, you'll want to go get one of these pieces of software as they have visual GUIs:

1. GitHub
2. SmartGit
3. Atlassian SourceTree

The CLI (Command Line Interface) is more for power users. At least you can start to learn how Git works, by looking at how branching & merging works. Here is the official page on how Git Branching works. The illustrations will help make sense of the labels / branch tags, which the software uses. It's not an easy process to learn about Git... but with some work & patience, you can pick it up as a skill for your skillset.

Answer 3

Saas is a flexible build system for CSS files. It allows you to add a little bit of logic to your CSS files as templates and make it easier to change certain values at build time. One example is where you want to change a font colour for a large number of elements, previous method was to go through the CSS file and change each CSS rule seperately and could take a long time, new method with Saas if you use it is to specify the value in the .scss file as a variable and to define it at the top of the document or through a configuration, then when you build the .scss files into .css files the variables are replaced with the value that they represent. (http://sass-lang.com/)

Gulp is just a build automation system. Gulp can be used from within a number of IDE's and a wide range of languages and is marketed as a toolkit to help automate time-consuming tasks in the development workflow. (http://gulpjs.com/)