node-sass
which provides bindings to libsass
.@babel/core
) - JavaScript compiler - Use next generation JavaScript, today.browser-sync-webpack-plugin
node
: ^10 || ^12 || >=14
npm
npm
clean install. $ npm ci
More on the clean install npm command can be read here
npm ci
You can still use
npm install
in cases thenpm ci
raises system error due to specific platform incompatibilities.
package.json
file 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 specify contributors
.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 of node
that your stuff works on.webpack.config.js
browser-sync
package or configure to use an external already running server of your existing web back-end powered application.const serverConfiguration = {
internal: {
server: {
baseDir: 'dist',
},
port: 3000,
},
external: {
proxy: 'http://localhost:9000/path/to/project/',
},
};
/src/scss/
/src/js/
/src/images/
/src/fonts/
/src/
$ npm run build
$ npm run watch
Define any other files that needs syncing in
files:[]
section underBrowserSyncPlugin
inwebpack.config.js
BrowserSync UI can be reached by default on this location: http://localhost:3001
$ npm run watch:externalServer
Configure the URL to your running external web server in the webpack.config.json
project under:
const serverConfiguration = {
// ...,
external: {
proxy: 'http://localhost:3000/path/to/project/',
},
};
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
Executes both install
and watch:externalServer
tasks in a single command convenient for development with existing webserver back-end powered application:
$ npm run bundle:externalServer
$ npm run production
/dist/css/
/dist/js/
/dist/images/
/dist/images/design/
<img>
tags) are located under /dist/images/content/
/dist/fonts/
/dist/
$ npm run lint-sass
$ npm run lint-js
This boilerplate template contains integration with Travis CI. The build system runs all linting scripts and deploys production optimized pages to GitHub pages upon push to the master
branch. However, note that this deployment flow only works for Project Pages, as User and Organization pages only support the master branch flow.
For more information on how to set up alternative deployment processes, check out the Travis CI documentation on deployment. The service can deploy to dozens of cloud providers, including Heroku, AWS, and Firebase.