A well structured gulpfile that performs CSS, JS, image and PHP tasks with an abstract config.

Gulpfile

Specifically, this gruntfile will perform the following.

- CSS:
-- Compile SCSS
-- Add vendor prefixes for the last 10 browser versions

- JS:
-- Run scripts through jshint to detect errors and potential problems in code.
-- Compile scripts to your destination folder in their original state. Use these in development environments as they'll be easier to debug with as their code doesn't exist on 1 line, nor is it obfuscated.
-- Minify and concatenate scripts into one all.min.js. Uglify will also obfuscate code if you set mangle to true, leave as false if using AngularJS.

- Images:
-- Optimise images for web.

- PHP:
-- Run phpunit tests.

Additionally, note:
- The build (destination) folders will be cleaned (removed) before compiling when you run `gulp` or `gulp clean`.
- Only changed javascript files will trigger the JS task, improving task speed.
- Only changed images will be optimised, improving task speed.

gulpfile.js

// Required Plugins
var gulp = require('gulp'),
    gutil = require('gulp-util'),
    notify = require('gulp-notify'),
    scss = require('gulp-ruby-sass'),
    autoprefix = require('gulp-autoprefixer'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    changed = require('gulp-changed'),
    clean = require('gulp-clean'),
    cache = require('gulp-cache'),
    exec = require('child_process').exec,
    sys = require('sys');

// Config
var paths = {
        scss: 'app/assets/scss/**/*.scss',
        js: 'app/assets/js/**/*.js',
        images: 'app/assets/images/**/*',
        php: 'app/**/*.php'
    },
    dests = {
        css: 'public/css',
        js: 'public/js',
        images: 'public/images'
    },
    options = {
        autoprefix: 'last 10 version',
        imagemin: { optimizationLevel: 3, progressive: true, interlaced: true },
        jshint: '',
        jshint_reporter: 'default',
        scss: { style: 'compressed', compass: true },
        uglify: { mangle: false },
        clean: { read: false }
    };

// Clean
gulp.task('clean', function() {
    return gulp.src([
            dests.css, dests.js, dests.images
        ], options.clean )
        .pipe( clean() )
        .pipe( notify( { message: 'Clean task complete.' } ) )
});

// CSS
gulp.task('css', function () {
    return gulp.src( paths.scss )
        .pipe( scss( options.scss ).on( 'error', gutil.log ) )
        .pipe( autoprefix( options.autoprefix ) )
        .pipe( gulp.dest( dests.css ) )
        .pipe( notify( { message: 'CSS task complete.' } ) )
});

// JS
gulp.task('js', function () {
    return gulp.src( paths.js )
        .pipe( changed( dests.js ) )
        .pipe( jshint( options.jshint ) )
        .pipe( jshint.reporter( options.jshint_reporter ) )
        .pipe( gulp.dest( dests.js ) )
        .pipe( uglify( options.uglify ) )
        .pipe( concat( 'all.min.js' ) )
        .pipe( gulp.dest( dests.js ) )
        .pipe( notify( { message: 'Scripts task complete.' } ) )
});

// Images
gulp.task('images', function() {
    return gulp.src( paths.images )
        .pipe( cache( imagemin( options.imagemin ) ) )
        .pipe( gulp.dest( dests.images ) )
        .pipe( notify( { message: 'Images task complete.' } ) )
});

// PHP
gulp.task('phpunit', function() {
    exec('phpunit', function(error, stdout) {
        sys.puts(stdout);
    });
});

// Watch
gulp.task('watch', function () {
    gulp.watch( paths.scss, ['css'] );
    gulp.watch( paths.js, ['js'] );
    gulp.watch( paths.images, ['images'] );
    gulp.watch( paths.php, ['phpunit'] );
});

// Global
gulp.task('default', ['clean'], function() {
    gulp.start('css', 'js', 'images', 'watch');
});

package.json

{
  "devDependencies": {
    "gulp": "~3.*",
    "gulp-ruby-sass": "~0.*",
    "gulp-util": "~2.*",
    "gulp-autoprefixer": "0.*",
    "gulp-notify": "~1.*",
    "gulp-jshint": "~1.*",
    "gulp-uglify": "0.*",
    "gulp-concat": "*",
    "gulp-imagemin": "*",
    "gulp-changed": "~0.3.0",
    "gulp-clean": "*",
    "gulp-cache": "*"
  }
}

I fixed the I'm receiving jshint error by globally installing a downgrade version + jshint@2.8.0
npm install -g --save-dev jshint

I'm not getting an error with css:

[09:01:02] Using gulpfile /Library/WebServer/Documents/app/gulpfile.js
(node:8024) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
[09:01:02] Starting 'clean'...
[09:01:02] Finished 'clean' after 18 ms
[09:01:02] Starting 'default'...
[09:01:02] Starting 'css'...
[09:01:02] 'css' errored after 2.73 ms
[09:01:02] TypeError: glob pattern string required
at new Minimatch (/Library/WebServer/Documents/app/node_modules/minimatch/minimatch.js:116:11)
at setopts (/Library/WebServer/Documents/app/node_modules/gulp-ruby-sass/node_modules/glob/common.js:118:20)
at new GlobSync (/Library/WebServer/Documents/app/node_modules/gulp-ruby-sass/node_modules/glob/sync.js:40:3)
at Function.globSync [as sync] (/Library/WebServer/Documents/app/node_modules/gulp-ruby-sass/node_modules/glob/sync.js:26:10)
at gulpRubySass (/Library/WebServer/Documents/app/node_modules/gulp-ruby-sass/index.js:71:21)
at Gulp. (/Library/WebServer/Documents/app/gulpfile.js:51:16)
at module.exports (/Library/WebServer/Documents/app/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Library/WebServer/Documents/app/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Library/WebServer/Documents/app/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Library/WebServer/Documents/app/node_modules/orchestrator/index.js:134:8)

I'm new to gulp and npm, coming from apache servers (used to using webSever dir), I may have the whole directory configuration confused. Any help would be appreciated.

At the moment, I've got this file structure:

|- WebServer
>>|- documents
>>>|- app
>>>|- node_modules (dependences)
>>>>|- assests - (index.php)
>>>>|- css (styles.css)
>>>>|- images (no files)
>>>>|- js (no files)
>>>>|- scss (no files)
>>>>gulpfile.js
>>>>package.json
>>>>package-lock.json