Gulp configuration with Symfony (with Sass, Babel and Webpack)

gulpfile.babel.js

import gulp from 'gulp';
import webpack from 'webpack';
import loader from 'gulp-load-plugins';
const plugins = loader();

// Basic path and environment configuration
const config = {
  dirs: {
    assets: './app/Resources/assets',
    build: './web/build',
    npm: './node_modules',
  },
  production: !!plugins.util.env.prod,
};

// Assets path configuration
config.assets = {
  app: {
    css: {
      source: [
        `${config.dirs.assets}/sass/**/*.scss`,
      ],
      targetDir: `${config.dirs.build}/css/`,
      targetFilename: null,
    },

    js: {
      entry: [`${config.dirs.assets}/js/index.js`],
      source: [`${config.dirs.assets}/js/**/*.js`],
      targetDir: `${config.dirs.build}/js/`,
      targetFilename: 'app.js',
    },

    fonts: [
      `${config.dirs.assets}/fonts/*`,
    ],
  },

  vendor: {
    css: {
      source: [],
      targetDir: `${config.dirs.build}/css/`,
      targetFilename: 'vendor.css',
    },

    js: {
      source: [
        `${config.dirs.npm}/jquery/dist/jquery.js`,
        `${config.dirs.npm}/is_js/is.js`,
      ],
      targetDir: `${config.dirs.build}/js/`,
      targetFilename: 'vendor.js',
    },

    fonts: [],
  },
};

// Configuration specific to webpack
config.webpack = {
  entry: config.assets.app.js.entry,
  output: {
    path: config.assets.app.js.targetDir,
    publicPath: '/',
    filename: config.assets.app.js.targetFilename,
  },
  debug: !config.production,
  devtool: config.production ? false : 'source-map',
  module: {
    loaders: [
      {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: { presets: ['es2015'] },
      },
    ],
  },
  resolve: {
    extensions: ['', '.js'],
  },
  plugins: config.production ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
  ] : [],
};

// Misc config
config.misc = {
  sassIncludePaths: [`${config.dirs.npm}/bootstrap-sass/assets/stylesheets`],
};


// Gulp application
const app = {
  bundleCss(cssConfig, options = { compile: false, concat: false }) {
    gulp.src(cssConfig.source)
      .pipe(plugins.plumber())
      .pipe(options.compile && !config.production ? plugins.sourcemaps.init() : plugins.util.noop())
      .pipe(options.compile ? plugins.sass({
        style: 'compressed',
        includePaths: config.misc.sassIncludePaths,
      }) : plugins.util.noop())
      .pipe(options.compile ? plugins.autoprefixer() : plugins.util.noop())
      .pipe(options.concat ? plugins.concat(cssConfig.targetFilename) : plugins.util.noop())
      .pipe(config.production ? plugins.cleanCss({
        advanced: false,
        compatibility: {
          properties: { zeroUnits: false },
        },
      }) : plugins.util.noop())
      .pipe(options.compile && !config.production
          ? plugins.sourcemaps.write('.')
          : plugins.util.noop())
      .pipe(gulp.dest(cssConfig.targetDir));
  },

  bundleAppJs() {
    const compiler = webpack(config.webpack);
    compiler.run((error, stats) => {
      if (error) {
        plugins.util.log('Webpack', stats.toString({
          colors: true,
        }));

        throw new plugins.util.PluginError('Webpack', error);
      }
    });
  },

  bundleVendorJs() {
    gulp.src(config.assets.vendor.js.source)
      .pipe(plugins.plumber())
      .pipe(plugins.concat(config.assets.vendor.js.targetFilename))
      .pipe(config.production ? plugins.minify({ preserveComments: false }) : plugins.util.noop())
      .pipe(config.production ? plugins.uglify() : plugins.util.noop())
      .pipe(gulp.dest(config.assets.vendor.js.targetDir));
  },

  copy(srcFiles, outputDir) {
    gulp.src(srcFiles)
      .pipe(gulp.dest(outputDir));
  },
};

// Main task
gulp.task('default', ['css', 'js', 'fonts']);


// CSS Config
gulp.task('css', ['app:css', 'vendor:css']);

gulp.task('app:css', () =>
  app.bundleCss(config.assets.app.css, { compile: true, concat: false })
);
gulp.task('vendor:css', () =>
  app.bundleCss(config.assets.vendor.css, { compile: false, concat: true })
);


// JS Config
gulp.task('js', ['app:js', 'vendor:js']);

gulp.task('app:js', () =>
  app.bundleAppJs()
);
gulp.task('vendor:js', () =>
  app.bundleVendorJs()
);


// Fonts Config
gulp.task('fonts', ['app:fonts', 'vendor:fonts']);

gulp.task('app:fonts', () =>
  app.copy(config.assets.app.fonts, `${config.dirs.build}/fonts`)
);
gulp.task('vendor:fonts', () =>
  app.copy(config.assets.vendor.fonts, `${config.dirs.build}/fonts`)
);


// Watch Config
gulp.task('watch', ['app:css', 'app:js', 'watch:css', 'watch:js']);

gulp.task('watch:css', ['app:css'], () =>
  gulp.watch(config.assets.app.css.source, ['app:css'])
);
gulp.task('watch:js', ['app:js'], () =>
  gulp.watch(config.assets.app.js.source, ['app:js'])
);


// Linters Config
gulp.task('lint', ['lint:css', 'lint:js']);

gulp.task('lint:css', () =>
  gulp.src(config.assets.app.css.source)
    .pipe(plugins.scssLint())
);

gulp.task('lint:js', () =>
  gulp.src(config.assets.app.js.source)
    .pipe(plugins.eslint())
    .pipe(plugins.eslint.format())
    .pipe(plugins.eslint.failAfterError())
);

package.json

{
  "babel": {
    "presets": [
      "es2015"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb",
    "globals": {
      "jQuery": true,
      "$": true,
      "is": true,
      "Routing": true
    }
  },
  "dependencies": {
    "bootstrap-sass": "^3.3.6",
    "is_js": "^0.8.0",
    "jquery": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "eslint": "^3.0.0",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.11.1",
    "eslint-plugin-jsx-a11y": "^2.0.1",
    "eslint-plugin-react": "^5.2.2",
    "eslint-plugin-typelint": "^1.0.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-babel": "^6.1.2",
    "gulp-clean-css": "^2.0.10",
    "gulp-concat": "^2.6.0",
    "gulp-eslint": "^3.0.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-minify": "0.0.12",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^2.3.2",
    "gulp-scss-lint": "^0.4.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "webpack": "^1.13.1"
  }
}