@theme-tools/plugin-js-concat-babel v1.1.0
JS (Concat, Babel) Plugin for Theme Tools
Theme core plugins let you easily pass in configuration and get a set of Gulp-ready task functions back that have sensible defaults and work well together.
Features
- Concatenate multiple JS files into a single file
- Run through Babel so you can use ES6 thanks to
babel-preset-es2015
(optional) - Process end file with Uglify (optional)
- Validate code using ESlint (optional)
- Watch tasks that only lints changed files
Getting Started
Requirements
- Gulp 4 installed with
npm install --save gulp@4
Install
npm install @theme-tools/plugin-js-concat-babel --save
Configure
The config that is passed in is merged with config.default.js
. We suggest starting with config.simple.js
to get started:
cp node_modules/@theme-tools/plugin-js-concat-babel/config.simple.js config.js.js
Setup
Add this to your gulpfile.js
:
const gulp = require('gulp');
const config = {};
config.js = require('./config.js.js');
const jsTasks = require('@theme-tools/plugin-js-concat-babel')(config.js);
gulp.task('validate:js', jsTasks.validate);
gulp.task('js', jsTasks.compile);
gulp.task('fix:js', jsTasks.fix);
gulp.task('clean:js', jsTasks.clean);
gulp.task('watch:js', jsTasks.watch);
Details
Tasks
These tasks are methods inside jsTasks
from the above code example. You can run them anyway you can run a function, though they are often ran via Gulp. All tasks take a callback function as the first and only parameter that will run when the task is done - exactly how gulp.task()
, gulp.parallel()
, and gulp.series()
want.
jsTasks.compile()
- Compile JS
Concat all the files in config.src
together, run them through Babel with the babel-preset-es2015
preset, Uglify it, then write it to config.dest
.
jsTasks.validate()
- Lint using Eslint
Test code using eslint.
jsTasks.fix()
- Try Fix Eslint Errors/Warnings
Fix the easy stuff to fix. Modifies original files. Awesome.
jsTasks.clean()
- Clean files
Deletes files that were made.
jsTasks.watch()
- Watch files
Watches files, then compiles and validates the changed files.
Configuration
All configuration is deep merged with config.default.js
.
src
Type: Array<String>
Default: [ 'js/**/*.js' ]
All the files to work on.
dest
Type: String
Default: 'dest/'
Destination folder to write files.
destName
Type: String
Default: 'all.js'
The filename to write.
sourceMapEmbed
Type: Boolean
Default: false
Should sourcemaps be embeded in the file or as their own *.js.map
file?
uglify
Type: Boolean
Default: true
Should the file be Uglified?
babel
Type: Boolean
Default: true
Should Babel transpile the JS using the babelConfig
?
babelConfig
Type: Object
Default: {}
Configuration for Babel, basically the contents of .babelrc
. This is where you'd add presets or plugins and would want to do it like this to avoid weird bugs:
babelConfig: {
presets: ['babel-preset-es2015'].map(require.resolve),
},
eslint
Type: Object
eslint.enabled
Type: Boolean
Default: true
Enable ESlint?
eslint.extraSrc
Type: Array<String>
Default: []
A list that can use globbing of files to lint on top of what is found in src
.
Setup Details
Setting up basic Babel
- Run
npm install --save babel-preset-es2015
- Add this to your config:
babelConfig: {
presets: ['babel-preset-es2015'].map(require.resolve),
},
Setting up ESlint
- Create your configuration file (i.e.
.eslintrc
)
Theme Core Events
This is only info for other Theme Core plugin developers.
emit 'reload'
This event is emmited when files are done compiling. The first paramater is a String of the files changed.