The purpose of this package is to set up a development environment that supports es6 (es2015) and the sass preprocessor. Installing this package globally allows you to create a boilerplate project and give you via the command line tool es6-sass the ability to transpile javascript es6 to one bundled minified es5 file and sass files to a single compressed css file. The command line tool es6-sass allow you to :
- init project
- transpile an bundle es6 to es5
- transpile .scss files to .css single file
- eslint your javascript
- uglify your javascript
- compress your css
- watching mode for js an scss change
###The structure of the generated project is as follows:
your_project/
|_ node_modules/ # node modules folder
|_ src/
| |_ js / # Put here your es6 js files, you can create subfolders
| | |_ main.js
| |_ scss / # Put here your scss files, you can create subfolders
|_ dist/
| |_ js / # generated es5 file
| | |_ main.js
| | |_ main.min.js
| |_ css / # generated css file
| |_ main.css
| |_ main.css.map
|_ .es6-sass # configuration file
|_ .eslintrc # eslint configuration file
|_ index.html #
|_ package.json #
This package must be installed globally.
npm install -g es6-sass
mkdir my-project
cd my-project
es6-sass init # generates the structure of the project
es6-sass build # transpiles and bundles es6 to es5 single file
es6-sass sass # transpile .scss files to css file and generate sourceMap file
es6-sass minify # uglify and generates .min.js file and compress .css file
es6-sass eslint # parse js files and show errors according to .eslintrc config file
es6-sass watch # enables the watch mode on all js an scss files
es6-sass init generates a default .es6-sass config file. you can change defaults.
module.exports = {
/**
* the name bundled output files main.js and main.css
* Olso the js namespace in the global scope window.main
*/
library: 'main',
/**
* ES6 source folder. All subfolders are scanned
*/
jsBasePath: 'src/js',
/**
* SASS source folder. All subfolders are scanned
*/
scssBasePath: 'src/scss',
/**
* ES5 destination folder.
*/
jsDest: 'dist/js',
/**
* SASS destination folder.
*/
cssDest: 'dist/css'
};