Gulp settings

gulpfile.js

'use strict';

// Gulp
var gulp = require('gulp');

// Plugins
var $ = require('gulp-load-plugins')();

var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var bowerFiles = require('main-bower-files');
var bulkSass = require('gulp-sass-bulk-import');
// var pkg = require('./package.json');
// var info = '// <%= pkg.name %>@v<%= pkg.version %>, <%= pkg.license %>\n';

// Autoprefixer
var AUTOPREFIXER_BROWSERS = [
  'ie >= 10',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
  'ios >= 7',
  'android >= 4.4',
  'bb >= 10'
];

// Paths
var paths = {
  'scssSrc': 'scss/**/*.scss',
  'scssPath': 'scss/',
  'bowerPath': 'bower-components/',
  'foundationPath': 'foundation/',
  'jsSrc': 'js/**/*.js',
  'rootDir': './'
};

// Display error function, to format and make custom errors
var displayError = function(error) {

  // initial building up of the error
  var errorString = '[' + error.plugin + ']';
  errorString += ' ' + error.message.replace('\n', '');

  // If the error contains the filename or line number add it to the string
  if (error.fileName) {
    errorString += ' in ' + error.fileName;
  }
  if (error.lineNumber) {
    errorString += ' on line ' + error.lineNumber;
  }

  // This woll output am error like the following:
  // [gulp-sass ] error message in file_name on line 1
  console.error(errorString);
};

// gulp-sass => 2.0.1
gulp.task('styles', function() {
  return gulp.src([paths.scssSrc])
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe(bulkSass())
    .pipe($.sass({
      precision: 10,
      // sourceComments: 'normal',
      sourceComments: false,
      errLogToConsole: true,
      outputStyle: 'compressed',
      // includePaths: [paths.bowerPath + 'foundation/scss/'],
      includePaths: [
        paths.bowerPath + paths.foundationPath + paths.scssPath
      ]
    }))
    .on('error', function(err) {
      displayError(err);
    })
    .pipe($.autoprefixer({
      browsers: AUTOPREFIXER_BROWSERS
    }))
    .pipe($.sourcemaps.write('./', {
      includeContent: false,
      sourceRoot: paths.rootDir + paths.scssPath
    }))
    .pipe(gulp.dest(paths.rootDir))
    .pipe($.if('*.css', $.csso()))
    .pipe($.sourcemaps.write('./', {
      includeContent: false,
      sourceRoot: 'scssPath'
    }))
    .pipe(gulp.dest(paths.rootDir + 'assets/dest/css'))
    .pipe($.filter('*.css'))
    .pipe($.notify({
      // message: 'Sass task complete😄'
      title: 'COMPILE SUCCESS',
      message: 'Sass task complete!!'
    }))
    .pipe($.size({
      title: 'sass'
    }))
    .pipe(reload({
      stream: true,
      once: true,
    }));
});

// Script
gulp.task('script', function() {
  return gulp.src([paths.jsSrc])
    .pipe($.plumber())
    .pipe($.jshint('.jshintrc'))
    .pipe($.jshint.reporter('jshint-stylish'))
    .pipe($.if(!browserSync.active, $.jshint.reporter('fail')))
    .on('error', function(err) {
      displayError(err);
    })
    .pipe($.uglify({
      mangle: false,
      preserveComments: 'some'
    }))
    .pipe(gulp.dest(paths.rootDir + 'assets/dest/js'))
    .pipe($.size({
      title: 'script'
    }))
    .pipe(reload({
      stream: true,
      once: true
    }));
});

// Bower components
gulp.task('bower-files', function() {
  return gulp.src(bowerFiles(), {
      // base: 'bower-components'
    })
    .pipe($.filter('**/*.js'))
    .pipe($.uglify({
      preserveComments: 'some'
    }))
    // .pipe($.concat('app.js'))
    .pipe(gulp.dest('./assets/lib/js'));
});

// Concat
gulp.task('concat', function() {
  return gulp.src(['assets/dest/js/my_script.js', 'assets/dest/js/my_sns.js', 'assets/dest/js/my_webfont.js'])
    .pipe($.concat('my_all.js'))
    .pipe(gulp.dest('assets/dest/js/dest/'))
    .pipe($.size())
    .pipe(reload({
      stream: true,
      once: true
    }));
});

// Optimize Images
gulp.task('images', function() {
  return gulp.src('assets/img/src/*')
    .pipe($.imagemin({
      progressive: true,
      interlaced: true
    }))
    .pipe(gulp.dest('assets/dest/images'))
    .pipe($.size({
      title: 'images'
    }));
});

// Clean Output Directory
gulp.task('clean', del.bind(null, ['assets/dest']));

gulp.task('build', ['clean'], function(cb) {
  runSequence('styles', ['script', 'concat', 'bower-files', 'images'], cb);
});

gulp.task('default', function() {
  global.isWatching = true;

  gulp.watch([paths.scssSrc], ['styles', reload])
    .on('change', function(evt) {
      console.log('[watcher] File ' + evt.path.replace(/.*(?=sass)/, '') + ' was ' + evt.type + ', compiling...');
    });
  gulp.watch(paths.jsSrc, ['script', reload]);
  gulp.watch('./assets/dest/js/*', ['concat', reload]);
  gulp.watch('./assets/img/src/*', ['images', reload]);
});

// browserSync
gulp.task('serve', function() {
  //browserSync.init(null, {
  browserSync({
    // server: {
    //   baseDir: paths.rootDir,
    //   // proxy: 'wordpress.local'
    // },
    proxy: 'vccw.dev',
    xip: true
  });

  gulp.watch([paths.scssSrc], ['styles', reload])
    .on('change', function(evt) {
      console.log('[watcher] File ' + evt.path.replace(/.*(?=sass)/, '') + ' was ' + evt.type + ', compiling...');
    });
  gulp.watch('./**/*.php', reload);
});

package.json

{
  "name": "dm-gulp-task",
  "main": "gulpfile.js",
  "browserify-shim": {
    "jquery": "global: jQuery"
  },
  "devDependencies": {
    "browser-sync": "*",
    "browserify": "^11.0.0",
    "browserify-shim": "^3.8.10",
    "del": "*",
    "gulp": "3.9.0",
    "gulp-autoprefixer": "*",
    "gulp-bower-files": "^0.2.7",
    "gulp-changed": "*",
    "gulp-concat": "*",
    "gulp-csso": "^1.0.0",
    "gulp-filter": "^3.0.0",
    "gulp-if": "*",
    "gulp-imagemin": "*",
    "gulp-jshint": "*",
    "gulp-load-plugins": "*",
    "gulp-minify-css": "*",
    "gulp-newer": "*",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "*",
    "gulp-rename": "*",
    "gulp-ruby-sass": "^1.0.5",
    "gulp-sass": "^2.0.4",
    "gulp-size": "^1.2.3",
    "gulp-sourcemaps": "*",
    "gulp-uglify": "*",
    "jshint-stylish": "*",
    "main-bower-files": "^2.9.0",
    "run-sequence": "*",
    "gulp-watch": "^4.3.3",
    "require-dir": "^0.3.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.3.0"
  },
  "scripts": {
    "postinstall": "bower install;",
    "start": "gulp",
    "sever": "gulp serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}