8

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?

  • They don't require git - but Gulp and Grunt (and Browserify and Webpack) do require node.js. Sass requires Ruby. Just to add to the confusion ;) – Tim Malone May 24 '16 at 8:15
2
  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'])
})
  1. Create a folder called scss with a file called main.scss
  2. 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.

  • 2
    Thanks! This is the kind of thing I needed. My problem was there were loads of guides for each individually, but I had no idea how to combine them and have them work together. – MeltingDog Apr 13 '16 at 23:00
5

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.

2

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/)

  • 3
    And neither require git. – DisgruntledGoat Apr 11 '16 at 8:14
  • But they do require node.js... Btw you've typed Saas instead of Sass twice. – wb9688 Apr 11 '16 at 9:41
  • @wb9688 not entirely true. There is various ways of compiling SASS, for example LibSass. – Simon Hayter Apr 11 '16 at 16:13
  • Thanks for the reply. I do know what they do - SASS sounds really useful with variables and nesting. This makes sense. But now what? How do I, a front end developer (who has knowledge in HTML, CSS and JS), actually start using it? I don't know Git or Command Line - it's not my area. – MeltingDog Apr 11 '16 at 23:32
  • @MeltingDog it doesn't require/use Git, btw to give you help to get started with it you must mention what OS you're using... – wb9688 Apr 12 '16 at 8:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.