Gulp

for transforming sass to css

Create a new folder 'project_name' for example

Perfect. It was 50% of your success. :)

Now download & install Node.js

Now open your folder in cmd line & enter there 'npm init'. After that fill 'name', 'version', 'description', 'entry point', 'test command', 'git repository', 'keywords', 'author', 'license'

OR

press Enter, Enter, Enter, etc...

Take a look on a new 'package.json' file.

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "my project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now go back to the cmd line & enter:

  • npm install --global gulp-cli

  • npm install --save-dev gulp

Ok, we installed gulp. Now it's time to create index.html & two folders: 'css' and 'scss'

 Let's fill index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="css/styles.min.css">
</head>
<body>
    <main class="main">
        <article class="main__article">
	    Hi, <span class="main__article--marked-text">mr. Brown</span>.
	</article>
    </main>
</body>
</html>

 Now let's create entry.scss in the 'scss' folder.

.main {
    &__article {
	&--marked-text {
	    color: magenta;
	}
    }
}

What we gonna do?

  • check if our styles are valid;

  • transform sass to css;

  • minify css file;

  • relocate css file;

  • rename css file.

So let's also install:

  • npm i gulp-sass --save-dev
  • npm i gulp-scss-lint --save-dev
  • npm i gulp-scss-lint-stylish --save-dev
  • npm i gulp-clean-css --save-dev
  • npm i gulp-sourcemaps --save-dev
  • npm i gulp-rename --save-dev
  • npm i del --save-dev
  • npm i node-sass --save-dev

 

  • gem install scss_lint

so maybe it would be necessary to install Ruby

and

gulpfile.js - Modules list

'use strict';

var gulp = require("gulp"),
    del = require('del'),
    sass = require('gulp-sass'),
    scssLint = require('gulp-scss-lint'),
    scssLintStylish = require('gulp-scss-lint-stylish'),
    cleanCSS = require('gulp-clean-css'),
    rename = require("gulp-rename"),
    sourcemaps = require('gulp-sourcemaps');

gulpfile.js - styles task

gulp.task("styles", function(){
  return gulp.src("scss/entry.scss")
    .pipe(scssLint({ customReport: scssLintStylish }))
    .pipe(sourcemaps.init())
      .pipe(sass().on('error', sass.logError))
      .pipe(rename({
        basename: "styles",
        suffix: ".min"
      }))
      .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("css"))
});

gulpfile.js - clean task & default

gulp.task('clean', function(cb) {
  return del(['css'], cb);
});

gulp.task('default', ['clean'], function() {
  gulp.start('styles');
});

Now enter 'gulp' in cmd line & enjoy the gulp's magic

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "my project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-scss-lint": "^0.4.0",
    "gulp-scss-lint-stylish": "^1.0.1",
    "gulp-sourcemaps": "^1.6.0",
    "node-sass": "^3.10.1"
  }
}

package.json

Watcher

Install the watcher at first: npm i gulp-watch --save-dev

Then define it in the gulpfile.js: watch = require('gulp-watch');

/* adding 'watch' task */
gulp.task('watch', function() {
  gulp.watch('scss/**/*.scss',
  ['styles']);
});
/* fixing 'default' task */
gulp.task('default', ['clean'],
  function() {
    gulp.start('styles', 'watch');
  }
);

Gulp

By Serge Zdobnov

Made with Slides.com

Gulp

  • 1,849

More from Serge Zdobnov