Quick Start

Let's create a single page website with scss and javascript/babel support. The project directory would look like this.

my-website # Root directory of your site
├── assets
│ ├── js
│ │ └── main.js
│ └── scss
│ └── style.scss
├── www
│ ├── js
│ │ └── main.js
│ ├── css
│ │ └── style.css
│ └── index.html
├── gulpfile.js
└── package.json

Package install

First, install gulp and gulp-tron using npm command.

npm i gulp gulp-tron --save-dev

Gulpfile.js

Now let's create a gulpfile.js in the project root directory with following contents.

const tron = require('gulp-tron');
const scss = {
name: 'scss',
builder: 'GCSSBuilder',
src: 'assets/scss/**/*.scss',
dest: 'www/css',
clean: 'www/css'
}
const scripts = {
name: 'babel',
builder: 'GJavaScriptBuilder',
buildOptions: { babel: true }, // enable babel. Option to 'GJavaScriptBuilder'
src: 'assets/js/**/*.js',
dest: 'www/js',
clean: 'www/js'
}
const build = {
name: '@build',
dependencies: tron.parallel(scss, scripts)
}
tron.createProject(build).addCleaner().addWatcher({
watch: ['www/**/*.html'],
browserSync: { server: 'www' }
});

This configuration will create following 5 gulp tasks with browser reloading support:

  • scss: transpile scss files into css files
  • babel: transpile javascript with babel support
  • @build: execute 'scss' and 'babel' tasks in parallel
  • @clean: clean all the files or directories specified in 'clean' properties of each configurations
  • @watch: start watch for all the targets specified in 'src' properties of each configurations, and additional target specified by watch property in options to tron.addWatch() function.

Automatic module installation

Automatic dependency modules installation is enabled by default. Default package manager is 'npm', but it can be change to 'yarn' or 'pnpm' using tron.setPackageManager() function. To disable automatic module installation, call tron.setPackageManager({ autoInstall: false}).

For more information on auto-install feature, refer to auto-install section.

Custom build functions

gulp-tron provides various built-in builders such as 'GCSSBuilder' or 'GJavaScriptBuilder'. But if custom build functions are prefered, it can be done like this.

const scss = {
name: 'scss',
builder: (rtb) => {
const sass = tron.require('gulp-sass');
rtb.src().pipe(sass().on('error', sass.logError)).dest();
},
src: 'assets/scss/**/*.scss',
dest: 'www/css',
clean: 'www/css'
}
const scripts = {
name: 'babel',
builder: (rtb) => rtb.src().pipe(tron.require('gulp-babel')()).dest(),
buildOptions: { babel: true },
src: 'assets/js/**/*.js',
dest: 'www/js',
clean: 'www/js',
npmInstall: ['@babel/core'] // packages to be installed before build execution
}

Required node modules can be installed before each build execution using 'npmInstall' proptery. Or, tron.require() function can be used to install the required module automatically when the 'autoInstall' option is enabled.

Edit this page