A Node.js scripts that helps you to compile and deploy the static assets (CSS/JavaScript/images) of your website without gulp and grunt using Node.js and npm scripts
npm install deployment-toolsmodernizr with ModernizrWebpackPlugin
postcss plugin
postcss plugin
postcss plugin
postcss plugin
postcss plugin
calc via postcss-calc postcss plugin
commitizen, pre-git) with conventional-commit-message
npm publish with publish-please
git hook and pre-git
clean: delete and create again the JavaScript (buildPathJs config key) and CSS (buildPathCss config key) folder
bump: update the version inside package.json (packageJson config key) and Web.config (webConfig config key) according to major/minor/patch
buildImages: compress images
buildJs: lint(eslint-loader), transpile(babel-loader) and minify(UglifyJsPlugin) js files with webpack
buildCss: clean -> build stylesheet
build: test -> clean -> build[ js | style ]
upload: upload the compiled files on the CDN
deploy: bump -> clean -> build[ js | style ] -> upload
watch: starts webpack-dev-server for js files
test: test files inside folder with tape/blue-tape (TAP specification) and format the output with faucet
cdn: the domain of the CDN, used to built up the path (webpack splitting) for resources on CDN
projectName: name of the project, used to built up the path for resources and CDN
webConfig: the relative path with filename of the webConfig file (es: data/Web.Config). When set, version in the file as appSettings key swversion is updated during bump process
packageJson: the relative path with filename of the package.json file
longTermHash: use hash instead of version folder for filename to enable long-term-caching. The output for CSS files is ${outputFolder}${filename}-${filehash}.css while for JavaScript files you can configure it in webpack-config.js
srcSass: the path of the sass files (es: sass/). When set __Sass__ is used [OPT-IN]
srcLess: the path of the less files (es: less/). When set __Less__ is used [OPT-IN]
mainStyle: the entry file of the front's styles (es: main.less/main.sass)
mainBackoffileStyle: the entry file of the backoffice's styles (es: main-admin.less/main.sass) [OPT-IN]
buildPathCss: the path of the compiled CSS files (es: css)
preserveBuildPathCss: when true, avoid to delete the CSS folder during clean task [OPT-IN]
stylelintrc: path of stylelintrc file [OPT-IN]
styledocPath: path of the folder for style guides
doiuse: a list of browser (comma separated) to use with doiuse postcss plugin
autoprefixer: a list of browser (comma separated) to use with autoprefixer postcss plugin
srcJsPath: the path with the JavaScript files
mainJs: the main entry (es: main.js)
vendorsJs: the filename of the vendors file (es: vendors.js)[OPT-IN]
mainBackoffileJs: the backoffice main-entry (es: main-backoffice.js) [OPT-IN]
vendorsBackoffileJs: the filename of the vendors file for backoffice (es: vendors-backoffice.js)[OPT-IN]
buildPathJs: the path of the compiled JavaScript files (es: bundles)
webpackDevServerPath: the root directory (default: data)
webpackDevServerHost: the host (default: localhost)
webpackDevServerPort: the port (default: 8080)
imagesPath: minify and copy to CDN the images inside the path (es: /data/images/)[OPT-IT]
imagesCdnAlias: CDN alias for images so we can maximize parallel download with multiple domain (used by postcss plugin)
Web.config file) you can add a key to appSetting named swversion. When you run npm run bump or npm run deploy the version inside is upgraded automatically alongside package.json .
xml
`
In this way you can track project version in your .net website easily (for example alongside error reporting).
This is an example of how it could works with Sentry and Raven Client in an MVC website.
server-side:
`csharp
protected void Application_Error(object sender, EventArgs e) {
string v = ConfigurationManager.AppSettings["swversion"];
string sentrykey = ConfigurationManager.AppSettings["sentry.keybackend"];
var ravenClient = new RavenClient(sentrykey);
System.Exception exe = Server.GetLastError();
ravenClient.CaptureException(exe, sentryMessage,SharpRaven.Data.ErrorLevel.Error, new Dictionary() { { "scope", "backend" } }, new { Release = v, Environment = enviroment });
Response.Redirect("/Error/error");
HttpContext.Current.ClearError();
}
`
client-side:
`html
`
#### Long-Term-Caching
If you want to use long term caching for js e CSS (more here and here) you can
use longTermHash option. When so the build process try to update the relative keys inside Web.config with the hash of single file.
Moreover to avoid a new hash on main entry for every changes inside chuck, we use webpackManifest.
`xml
`
and you can change your razor views in this way
`html
@if (System.Diagnostics.Debugger.IsAttached) {
} else {
}
@if (System.Diagnostics.Debugger.IsAttached) {
} else {
}
`
Getting Started
Setup process of deployment-tools is quite easy - just run
`shell
npm install deployment-tools --save-dev
`
then you must copy the npm scripts that you want to use to your package.json file
`json
{
"scripts": {
"lint": "babel-node tools/run lint",
"clean": "babel-node tools/run clean",
"buildCss": "cross-env NODE_ENV=production babel-node tools/run buildCss",
"buildCss": "cross-env NODE_ENV=production babel-node tools/run buildCss",
"buildJs": "cross-env NODE_ENV=production babel-node tools/run buildJs",
"build": "cross-env NODE_ENV=production babel-node tools/run build",
"bump": "babel-node tools/run bump",
"deploy": "cross-env NODE_ENV=production babel-node tools/run deploy",
"upload": "babel-node tools/run upload",
"watch": "babel-node tools/run watch"
}
}
`
and the relative confing settings to package.json file
`json
{
"config": {
"cdn": "http://YOUR.CDN.DOMAIN",
"projectName": "project",
"webConfig": "Web.config",
"packageJson": "/package.json",
"srcJsPath": "/script/",
"mainJs": "main.js",
"mainBackoffileJs": "main-backoffice.js",
"buildPathJs": "/data/bundles/",
"srcSassOUT": "/sass/",
"srcLess": "/less/",
"mainStyle": "main.less",
"mainBackoffileStyle": "main-admin.less",
"buildPathCss": "/data/css/",
"preserveBuildPathCss": "true",
"imagesPath": "/data/images/",
"imagesCdnAlias": "http://your.cdn.domain.alias"
}
}
`
Documentation
The documentation of the package can be generated via esDoc
`shell
npm run doc
`
Test
Tests can be run via
`shell
npm test
`
TODO
* add amazon` CDN provider