- Simple setup instructions
- Start development of a project right away with simple, configured, browser synced, linter monitored asset files.
- Starter assets directory for reference and demo building of:
- JavaScript
- SASS
- Images
- Fonts
- Support for assets optimization for production:
- Minification of JavaScript and CSS files.
- Inline images / fonts files having file size below a configurable threshold value.
- Code style and formatting linters configuration and setup for:
- SASS
- JavaScript
- Latest Webpack 4 - JavaScript module bundler.
- Latest SASS/CSS compiler based on
node-sass
which provides bindings tolibsass
. - Latest Babel 7 (
@babel/core
) - JavaScript compiler - Use next generation JavaScript, today. - Configured and ready to use BrowserSync plugin -
browser-sync-webpack-plugin
node
>=8.9.0
npm
- Choose and download the template from List of Releases.
- Extract the release archive to a new directory, rename it to your project name and browse the directory.
- Install all dependencies using
npm
clean install.
$ npm ci
More on the clean install npm command can be read yere
npm ci
You can still use
npm install
in cases thenpm ci
raises system error due to specific platfrom incompatibilities.
-
Amend
package.json
and optionally specify:name
- Name of your project. A name can be optionally prefixed by a scope, e.g.@myorg/mypackage
.version
- Specify and maintain a version number indicator for your project code.author
- Your organisation or just yourself. You can also specifycontributors
.description
- Short description of your project.keywords
- Put keywords in it. It’s an array of strings.repository
- Specify the place where your code lives.license
- Announce your code license, figure out the license from Choose an Open Source License .engines
- Specify the version ofnode
that your stuff works on.
-
Configure
webpack.config.js
- Edit the configuration of the local web server path to your project location.
Note this development server should be already started, currently this package does not include web server
const localServer = {
path: 'localhost/',
port: 3000
};
- SASS files are located under
/src/scss/
- JavaScript files with support of ES6 / ECMAScript 2016(ES7) files are located under
/src/js/
- Image files are located under
/src/images/
- Font files are located under
/src/fonts/
- HTML files are located under
/src/
$ npm run build
$ npm run watch
Define any other files that needs syncing in
files:[]
section underBrowserSyncPlugin
inwebpack.config.js
Note: Watching does not work with NFS (Windows) and machines in VirtualBox. Extend the configuration in such cases by:
module.exports = {
//...
watchOptions: {
poll: 1000 // Check for changes every second
}
};
Executes both install
and watch
tasks in a single command convenient for development:
$ npm run bundle
- Optimize assets for production by:
$ npm run production
- CSS files are located under
/dist/css/
- JavaScript files with support of ES6 / ECMAScript 2016(ES7) files are located under
/dist/js/
- Images are located under
/dist/images/
- Images part of the design (usually referenced in the CSS) are located under
/dist/images/design/
- Images part of the content (usually referenced via
<img>
tags) are located under/dist/images/content/
- Images part of the design (usually referenced in the CSS) are located under
- Fonts are located under
/dist/fonts/
- HTML files are located under
/dist/
- SASS
$ npm run lint-sass
- JS
$ npm run lint-js