Small helper for gulp which is used internally at Becklyn


Small helper for gulp which is used internally at Becklyn. It includes some style guide definitions in form of default jsHint and scss-lint rules.

$ sudo npm install gulp becklyn-gulp --save-dev

The library provides some helper methods:

var becklyn = require("becklyn-gulp");
becklyn.js(path [, options]);
becklyn.scss(path [, options]);
becklyn.js_simple(path [, options]);
becklyn.jshint(path [, options]);

path can be a glob which can be parsed by glob. options is a map of configuration parameters (for details, see task descriptions below).

These methods return functions, that actually perform the task. The returned functions have the signature function (isDebug) where isDebug is a boolean parameter indicating whether the file should be compiled with debug parameters (like omitting the minification phase). Additionally a watcher is started in debug mode.

All these tasks can be used like this:

var gulp = require("gulp");
var becklyn = require("becklyn-gulp");
var options = {
    // ... 
var jsTask = becklyn.js("src/*/Resources/assets/js/*.js", options);
// compile in production mode 
gulp.task("js", function () { jsTask(false); });
// compile in debug mode 
gulp.task("dev", function () { jsTask(true); });

This task compiles javascript files using webpack. It automatically minifies file in non-debug mode, using UglifyJS.

externalsArray.<string, string>["jquery": "window.jQuery", "routing": "window.Routing"]The libraries that are shimmed by webpack.
lintboolean= isDebugFlag, whether the source should be linted (using jsHint).
logCachedFilesbooleanfalseFlag, whether the task should report on files that haven't changed.
useBabelbooleantrueFlag, whether Babel should be used. Also activates esnext: true in the jsHint config.
moduleLoadersArray.<{test: RegExp, loader: string}>[]Additional loaders, as described in the docs. (The babel and jsHint loader will still be automatically added, depending on the useBabel and lint options.)

Note: If you use Babel, you probably need to add the polyfill for older browsers to all your JS entry points. Just install the npm-package babel-core and do require("babel-core/lib/babel/polyfill"); at the top of all your top-level JavaScript files.

This task compiles Sass (SCSS) files using libsass. It automatically uses Autoprefixer and in production mode minification with clean-css.

browsersArray.<string>["last 2 versions", "ie 9"]The supported browser, for which prefixes should be generated (by Autoprefixer)
lintboolean= isDebugFlag, whether the source should be linted (using scss-lint).

This task compiles JavaScript files using UglifyJS. It does not include bundling using a system like webpack.

lintboolean= isDebugFlag, whether the source should be linted (using jsHint).

Lints your JavaScript files, without compiling them.

rulesObject{}All additional or overwriting rules for configuring jsHint (see reference).

There are two administration tasks, that help with deploying applications and managing separate layout projects.

becklyn.layout(layoutDir, vendorDir, copyMapping);

Copies the layout files from a layout dir to a vendor dir in the current project. You can specify the directories that should be copied in copyMapping.

var becklyn = require("becklyn-gulp");
    function ()
        return becklyn.layout("../test-project-layout/", "./public/vendor/layout", [
            // will copy ../test-project-layout/layout/public/* --> ./public/vendor/layout/* 
                from: "/layout/public",
                to:   "/"
            // will copy ../test-project-layout/assets/js/* --> ./public/vendor/layout/js/* 
                from: "/assets/js",
                to:   "/"

These are two small deployment helpers. The idea is that the directory structure looks like this:

└── project
    ├── public          <-- here are your compiled and prepared assets
    │   ├── css
    │   ├── img
    │   └── ...
    └── web             <-- this is your document root
        └── assets      <-- you want to have your public assets copied here
            |   css         so that you can access them using
            |   img
            └── ...
  • becklyn.publish.symlink() will symlink ./web/assets to point to ../public.
  • becklyn.publish.copy() will recursively copy the content of ../public to ./web/assets.

Warning: Both commands will wipe the current files / directories at ./web/assets.