Gulp

add-3.js

var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');

css-task.js

gulp.task('css', function() {
    gulp.src('./*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('./'));
})

gulp-install.sh

npm i -D gulp

gulpfile-imageop.js

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('default', function() {
  // place code for your default task here
});

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

install-3.sh

npm i -D gulp-sass gulp-autoprefixer gulp-clean-css

install-image-opt.sh

npm i -D gulp-image-optimization

install.sh

npm install --global gulp-cli

npm-install.sh

npm install --save-dev package1 package2 package3
# alrenative shorthand 
npm i -D package1 package2 package3

optimize-images.js

gulp.task('optimize-images', function(cb) {
    gulp.src(['./*.png','./*.jpg','./*.gif','./*.jpeg', './images/**/*.*'])
        .pipe(imagemin())
        .pipe(gulp.dest('./'))
});

setup.sh

mkdir example-gulp-theme && cd example-gulp-theme
touch header.php footer.php functions.php index.php style.css
npm init

style.css

html{background:#f90;transition:all .2s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

style.scss

/*
 Theme Name:   Gulp Test Theme
 Description:  A quick WordPress Gulp example theme
 Author:       Daniel Pataki
 Author URI:   http://danielpataki.com
 Version:      1.0.0
*/

$bg: #ff9900;

html {
    background: $bg;
    transition: all 200ms linear;
    user-select:none;
}

watch.js

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