spatie/blender-gulp

Gulp tasks & setup for Blender

blender-gulp

This is the gulp setup for Blender CMS.

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Install

Install gulp globally

$ npm install --global gulp

Install blender-gulp

This NPM package is custom built for Spatie projects and is therefore not registered on NPM.

We assume that you have Composer already installed for the php code style fixer.

We install it via a custom npm registry npm.spatie.be:

$ npm i blender-gulp --save-dev

Sample webpack.config.js

const webpack = require('webpack');

const config = require('blender-gulp/config/webpack');

config.entry = {
    'back.vendor': ['jquery'],
    'back.head': './js/back/head.js',
    'back.app': './js/back/app.js',
    'back.style': './sass/back/back.scss',
    'front.head': './js/front/head.js',
    'front.app': './js/front/app.js',
    'front.style': './sass/front/front.scss',
};

config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
    name: 'back.vendor',
    chunks: ['back.head', 'back.app', 'back.editor', 'back.chart'],
    filename: 'back.vendor.js',
}));

config.plugins.push(new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
}));

module.exports = config;

Usage

Run gulp help to see options

Change log

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• Willem Van Bockstal
• All Contributors

About Spatie

Spatie is webdesign agency in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

License

The MIT License (MIT). Please see License File for more information.

blender-gulp's Issues

v4.0 discussion

Why a major version

a) Upgrade webpack to v2
b) Potentially make other major changes to our build pipeline

a) Upgrade webpack to v2

Not much to say here, we wouldn't really notice the upgrade besides smaller bundles (win!) and maybe a cleaner code splitting syntax (currently the require.resolve thing).

New features we could look at:

• Webpack can throw a warning when an asset is larger than a recomended size, which would enforce us to split our js more often for optimization (could be nice, could be a hassle).

b) Other changes

TypeScript

It would be nice to be able to use TypeScript.

Pros

• We could replace babel with TS. This means no more 1001 babel dependencies that we need to add to our package.json files. Alos, no decisions for ESNext features, we use whatever TypeScript ships.
• Type checking 😍

Cons

• It might suck. We won't know until we try it, 3rd party library type definitions could be an issue, mixing with plain JS might solve this.

.vue file usage

Do we want to keep using .vue files?

Pros

• Precompiles template for better performance
• Vue community seems to like them, but they're not necessarily pushed as the 'one way'

Cons

• Large overhead in the asset pipeline
• Makes it harder to add tools to our workflow (e.g. TypeScript, ESLint)
• Less support in editors (e.g. weaker autocomplete, syntax highlighting)

Without .vue files, we would just use Vue's runtime build which is less performant (but this might not really matter for our use case). There are always workarounds to gain perf in critical parts of an app if necessary.

Lint vue files with webpack

Version 2 features

Webpack

• Javascript
• Uglify in production
• Sass
• Css autoprefixer
• Seperate css files in production
• Minify in production
• Inline images
• Dev server
• Hot reload
• Watch timestamps
• Plain watch

Revision

• Revisioning
• Server side handler

Various

• SVG
• Favicons
• Lint
• Help