carbon-gulp
Shared build steps for projects using the carbon UI Library
Install
npm install carbon-gulp -D
Before starting
Install gulp
npm install gulp -D
Usage
Create your own gulpfile.js
with the following structure
// gulpfile.js const gulp = ;const cbngulp = gulp; cbngulp; // gulp tasks alliasesgulp; gulp; gulp;gulp;
Build tasks
JS Builds and minimises and uglifies your js files
js: dependencies: 'eslint' // optional entry: 'src/main.js' out: 'dist/main.min.js' watch: 'src/**/*.js' rollupConfig: moduleName: 'yourModuleName' format: 'iife'
SCSS Builds css from sass files and minimises it
scss: dependencies: 'stylelint' // optional entry: 'src/main.scss' out: 'dist/carbon.min.css' watch: 'src/**/*.scss'
Linter tasks
Optional tasks for linting code style
eslint: files: 'src/**/*.js' stylelint: files: 'src/**/*.scss'
For running linter tasks you will also need to create a configuration files. You could add custom rules to configuration files.
.eslintrc.js
for eslint task
moduleexports = Object;
stylelint.config.js
for stylelint task
moduleexports = Object;
Clean task
Simply cleans dist folder
serve: dir: 'dist'
Serve task
Runs a local server on localhost:3000 by default
clean: files: 'dist/**/*'
Karma task
Runs karma tests
jstest: type: 'js' entry: 'src/main.spec.js' out: 'dist/main.min.spec.js' watch: 'test-src/**/*.js' 'js-src/**/*.js' karma: dependencies: 'jstest' files: 'dist/index.spec.js'
Cross-browser testing on saucelabs
Please note, running tests on saucelabs requires SAUCE_USERNAME
and SAUCE_ACCESS_KEY
env variables to be set correctly.
karma: dependencies: 'jstest' files: 'dist/index.spec.js' sauceLabs: startConnect: true // all available options are here: https://github.com/karma-runner/karma-sauce-launcher
Usage example
This is a working example, that shows all posible build tasks
const gulp = ;const cbngulp = gulp; cbngulp; gulp; gulp; gulp;
Compatibility with Grunt (?)
npm install gulp-grunt -D
...