becklyn-gulp

Small helper for gulp which is used internally at Becklyn

becklyn-gulp

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.

OptionTypeDefaultDescription
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.

OptionTypeDefaultDescription
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.

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

Lints your JavaScript files, without compiling them.

OptionTypeDefaultDescription
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);
becklyn.publish.symlink();
becklyn.publish.copy();

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");
 
gulp.task("layout",
    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 http://example.org/assets/...
            |   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.

You can use bower with becklyn-gulp. If you run the gulp task, the current working directory (= the directory where your gulpfile.js is) is automatically added to the include paths of node-sass.

So in your CSS you can just do

@import "bower_components/normalize.css/normalize";

and it should work.