-
Notifications
You must be signed in to change notification settings - Fork 1
Frontend skeleton
Frontend Skeleton is the general boilerplate for frontend web development, built on top of Node.js, containing modern web development tools such as Webpack, Babel and Browsersync. It's main goal is to stay productive and following best practices. You can find it in here: https://github.com/peterschmiz/skeleton The latest version is V4, to use it please check out the v4 branch.
For generating HTML files we are using Pug. Pug (formerly known as "Jade") is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. To learn pug see the full documentation at pugjs.org.
For generating CSS files we are using PostCSS. PostCSS is a tool for transforming CSS styles with JS plugins. We are using lots of PostCSS plugins like:
stylelint - is a modular stylesheet linter postcss-next - allows you to use future CSS features today (includes autoprefixer, which adds vendor prefixes, using live data from caniuse.com) cssnano - is a modular css minifier postcss-responsive-type - generate automagical fluid typography, with new responsive properties for font-size, line-height and letter-spacing, behind the magic here are serious CSS math: https://madebymike.com.au/writing/precise-control-responsive-typography/
For generating JS files we are using Webpack, a Javascript module bundler. Our source js files are written in ES6 or also known ES2015 Ecmascript standard and then will be automatically transpiled with Babel.
Install Yarn if you don't have it yet!
Once Yarn is installed run the following command from the Frontend skeleton's uid-skeleton directory:
yarn install This will install all the node packages.
To build the project just run:
yarn build To start the project on localhost (only static version) just run:
yarn start
You can find all the available Yarn commands in the package.json file.
{
"deploy": "yarn run build-css-release && yarn run build-fonts && yarn run build-js-release && yarn run optimize-images-release && yarn run build-svg && yarn run build-html && yarn run deploy-files",
"build": "yarn run build-css-release && yarn run build-fonts && yarn run build-js-release && yarn run optimize-images-release && yarn run build-svg && yarn run build-html",
"build-with-inject": "yarn run build-css-release && yarn run build-js-release && yarn run optimize-images-release && yarn run build-svg && yarn run build-html && yarn run critical-css && yarn run inject-css",
"build-css": "gulp postcss --lint true --production false",
"build-css-nolint": "gulp postcss --lint false --production false",
"build-css-release": "gulp postcss --lint true --production true",
"build-js": "gulp webpack --lint true --production false",
"build-js-nolint": "gulp webpack --lint false --production false",
"build-js-release": "gulp webpack --lint true --production true",
"build-svg": "gulp svg",
"build-fonts": "gulp fonts",
"build-html": "gulp pug",
"deploy-files": "gulp deploy",
"critical-css": "gulp critical",
"inject-css": "gulp inject",
"optimize-images": "gulp imagemin --production false",
"optimize-images-release": "gulp imagemin --production true",
"start": "yarn run build-css && yarn run build-js && gulp start",
"watch": "gulp watch",
"lint": "eslint src/js/**/*.js && stylelint src/css/**/*.pcss"
}