in Basset, Our Authors

ES6, Environment Variables, Git changes and Folder By Feature in Laravel Basset 1.6

Latest release of Laravel Basset 1.6 brings several very powerful features which will ease your development.

We are again able to add features without breaking compatibility. But, just to make sure this version is tagged with 1.6.X version number, so that you can revert to ~1.5.0 if new features cause issues for your project.

ECMAScript 6 – Future JavaScript

New version has Babel enabled for all JavaScript files except JavaScript files in bower_components. This means you can already start using all the good features of ES6!

New version also detects if your files use ES6 modules or require and runs Browserify or not where you don’t use any.  Most projects can safely switch to this, so you can use ES6 immediately while (and this is optional) you are also moving to Browserify for module bundling.

Enabling Babel also gives you early parse error notifications.

Environment Variables

You can access Environment Variables or .env in your frontend JavaScript with process.env.{VARIABLE_NAME}. React and other libraries use that a lot, and you should too. Here, for example:

var query = $.params(paramObject);

if (process.env.NODE_ENV !== "production") {
  console.log(query);
}

This will get converted to:

var query = $.params(paramObject);

if ("local" !== "production") {
  console.log(query);
}

But for production environment this will be "production" !== "production" and always be false and minifier will remove that code block as dead code.

You could use this also for other environment variables, like:

var Items = new RestResource({
   url: process.env.ITEMS_API_URL // which can be /api/v2.1/items
});

Git Changes Watch

Before, when you tried to git pull, checkout or merge or any git operation, if the files tree changed sometimes you had to restart gulp basset:watch.

But now, Basset is also watching git changes and will rebuild collections and restart watch mode when any git caused change is detected. Now you can just continue working as usual.

Folder By Feature

We have an optional Folder By Feature file resolving for your collections. It enforces good practice for organizing files and loads files in a certain order. It follows the simple rule: Keep a folder for a feature.

Here’s an example of folder by feature structure:

─── resources
    └── assets
        └── app
            ├── app.js
            ├── http.js
            ├── layout.less
            ├── article
            │   ├── article-list.less
            │   ├── article.js
            │   └── service.js
            └── tags
                ├── Tags.js
                ├── TagsController.js
                ├── index.js
                └── tags.less

And here is the globs that Basset will auto-generate for app collection (here for .js files only):

app/{index,app}.js
app/*.js
app/tags/*.js
app/tags/{index,tags}.js
app/article/*.js
app/article/{index,article}.js

As you see, every folder has a main file with the name of the folder or with the index name. This file is loaded first for root collection folder, but is loaded last for all other subdirectories. This way you can use main file inside root collection folder to bootstrap everything, and every main file in subdirectories to “boot” every subdirectory, after everything is defined.

Basset will generate similar globs for other supported files, like CoffeeScript, CSS/LESS/SASS.

You can enable discover feature by adding discover: true to your collection definition:

{
  collections: {
    app: {
      discover: true
    }
  }
}

This will load files according to folder by feature rule.

Short task names

Shortcuts are added for common tasks:

$ gulp w
is the same as
$ gulp basset:watch

$ gulp b
is the same as
$ gulp build

$ gulp c
is the same as 
$ gulp clean

 

Share this ...Tweet about this on TwitterShare on FacebookEmail this to someoneShare on RedditShare on Google+Share on LinkedInPin on Pinterest