One gulp file to rule them all

A gulp and webpack config that handles most of my use cases. It handles continuous compilation of static js, pug and sass (or stylus) files and optionally restarts the node server with nodemon. ~~Optionally react and jsx support is available.~~

Other features are simple handling of production and development environment configuration, caching, as well as propper error handling.

Table of contents

• JS (JSX) / ES6
• Pug (Jade)
• SASS (SCSS) / Stylus
• Nodemon
• Environment configuration and Caching
• Configuration
• Not finished

JS (JSX) / ES6

The js (or optionally jsx) files will be built mostly with webpack-stream for gulp. They will go through following process:

1. Linting will be done before compilation with es-lint. If the linting is not successfull, the files will not be compiled.
2. Babel compiler will compile all es6 code to compatible es2015. Note that pollyfill is not included however is recomended. The babel compiler will only change the syntax. Polyfill.io is very recomended.
3. Webpack compilation will compile all js (or jsx) files into one.
4. Uglify for gulp will uglify all files before final saving if ogftrta is configured to be in production mode. In development mode, this step is skipped.

Pug (Jade)

The pug is optionally compiled to html. Note that if the pug files should be dynamically rendered by a node app this step should be completely skipped and they should remain in pug-form.

SASS (SCSS) / Stylus

The style files will go through the following process:

1. Compiling from sass, scss or stylus to vanilla css.
2. Autoprefixed with gulp-autoprefixer.
3. Minified with gulp-clean-css before final saving if ogftrta is configured to be in production mode. In development mode, this step is skipped.

Nodemon

Nodemon is completely optional. If the web page is static server side, nodemon should not be used. Otherwise node will only update if the node app files are updated. On server crash the server will restart every 10 seconds.

Environment configuration and Caching

Gulp-environments is used for environment configuration and conditional piping.

All pug and style files are cached automaticly for quicker compilation. The cache can be completely ignored.

Error handling is handled with gulp-plumber and enhanced with gulp-util.

Configuration

To configure this module is very easy.

• Instalation
• Using ogfrta in your project
• Adding configuration
• What does all the rules mean?
• Production

Installation

Because this is only a gulp configuration, and not a stand alone module, gulp has to be globaly installed.

npm install -g gulp
npm install --save ogfrta

Using ogfrta in your project

Because this is dependant on gulp, a gulpfile has to be created. Optionally both a gulp-configuration file and a custom webpack-configuration file can be created and included. The gulpfile.js should look something like this:

const gulp = require('gulp')
const ogftrta = require('ogftrta')

gulp.task('default', ogftrta)

Adding configuration

OGFTRTA has support for custom configurations and it should be submited as a json object. The default rules are:

{
	appEntry: 'app.js',
	destPath: 'public',
	srcPath: 'src',
	linting: false
	publicJsEntry: 'entry.js',
	pug: true,
	static: true,
	style: 'stylus',
	styleExt: 'styl',
	webpackPath: 'config/webpack.config.js',
}

To add custom rules into the ogftrta include them as a parameter when calling the main function. It could look something like this:

const gulp = require('gulp')
const ogftrta = require('ogftrta')

gulp.task('default', () => ogftrta({ linting: true }))

What does all the rules mean?

• appEntry is the path for the main file for running the node application. It is used by nodemon, both for starting the specified script, and for listening to the specified script. If the webpage is set to static, this rule will be ignored.
• destPath is the path directory for the compiled js, css and html files.
• srcPath is the path directory for the precompiled js, jsx, style and pug files.
• linting is the option for linting js and jsx files. NOTE THAT YOU WILL HAVE TO PROVIDE AN ESLINT FILE OR THE MODULE WILL CRASH! The .eslintrc file should be included in the project.
• publicJsEtry is the entry point for webpack.
• pug is the option for compiling pug files. If this is turned off, html files will be piped to the provided destination path.
• static is the option for nodemon. If this option is true, you are expected to only use ogftrta for compiling static files. If this option is false nodemon will also run your application.
• style is the selection of css-precompiler. It can be set to either stylus, scss or sass.
• styleExt is the file extenstion that you use for your precompiled css files.
• webpackPath is the path to your custom webpack configuration. This will overwrite the ogftrta webpack configuration completely. If there is no file in the provided path, there will be no overwriting, however note that if there is a file in the default path, the ogftrta webpack configuration will be overwriten.

All file paths originate from the root process instance which should be the gulpfile.js. The source files has to be placed in seperate folders according to the following structure.

├──<srcPath>
│   ├── [js | jsx]
│   ├── [stylus | scss | sass]
│   ├── [pug | html]

Production

Some features are not enabled in development mode. To enable features as uglifying js files set the production flag like this: NODE_ENV=production gulp

Not Finished

While this is still a beta there are some things that are not finished yet. Here is a list of promised features:

• Pipe static css files to destination path.
• Support for react.