Lightweight clone of the Front-end Gulp DevStack.
Table of contents (click to expand)
- Typical use cases
- Features
- Getting Started
- Project structure
- Workflow
- Updates from devstack to your existing project
- Inject devstack to your new project
- Roadmap and Known issues
- Contributing
- License
- Contact
- Developing landing pages or prototypes (
npm run dev
). - Building carefully compiled and formated files for programmers (
npm run export
). - Building the final (production) output bundle ready for deployment (
npm run deploy
).
When you want to build whole web sites from the data sources as API or many markdown files, go with Static Page Generators (SGC). For example Gridsome (VueJS), Gatsby (React) or Hugo (Go) will work for you much better.
- SEO-friendly β Open Graph and Twiter Cards markup, self/canonical.
- User-friendly β image optimizations, favicons, webmanifest and all sources minification to smallest bundle.
- Developer-friendly β ESLint, Prettier, Remark, Stylelint via tasks or with Husky and Lint staged.
- Separate tasks for Development, Export and Build with automatic renaming and hashing all critical assets.
- Ready for implementation Git based CMS as Forestry.io or Netlify CMS etc. β Front Matter (Markdown files metadata and content).
- HTML temlates uses Nunjucks. Fully customisable Bootstrap 4.5.x extended with BEM. JavaScript processed with Babel or injected from CDN or as static files.
Preprocessing / Linting | π οΈ Development Postprocessing |
ποΈ Export Postprocessing |
π― Build Postprocessing |
|
---|---|---|---|---|
CSS | SASS / Stylelint | PostCSS (Autoprefixer, prettify) | PostCSS (Autoprefixer, prettify) | PostCSS (Autoprefixer, clean-css, PurgeCSS) |
JavaScript | Babel / ESLint | only concatenate | concatenate & uglify | concatenate & uglify |
HTML | Nunjucks | prettify | prettify | minify |
JPG, SVG | imagemin | imagemin | imagemin | |
PNG | UPNG.js | UPNG.js | UPNG.js | |
Fonts | gulp-google-webfonts | gulp-google-webfonts | gulp-google-webfonts | |
Favicons | Favicons | Favicons | ||
Workflow hints | Browsersync |
- Linting all commit messages by CommitLint, see more about Semantic Commit Messages and Conventional Commits
- Commit guide on the CLI by git-cz
- Automatic releases with Release It!, see more about Semantic Versioning
- Changelog with Conventional Changelog
- Gitflow
- Build and deployment to FTP.
-
Node.js and npm are required.
-
Clone the repository into the new project directory
PROJECT_NAME
git clone https://github.com/cebreus/gulp-devstack-lite/ ./PROJECT_NAME
-
Go to project directory
PROJECT_NAME
and install npm dependenciescd PROJECT_NAME && npm i
-
Optional clenup (click to expand)
-
Clean
CHANGELOG.md
> CHANGELOG.md
-
Change or remove
LICENSE.txt
byrm LICENSE
rm LICENSE
-
Change this
README.md
according to your new project or replace it from the templatecurl https://gist.githubusercontent.com/cebreus/a6010a2a95a4f2375830b0af3193f2f9/raw/cde6d9c68f2605b34eb5b8710bd553e7ad28a678/minimalistic-readme > README.md
-
Change these data in the
package.json
accordng to your new projectname
description
keywords
author
license
private
repository
homepage
bugs
-
- Specialties designed for GitHub.
- Common Gulp tasks for Development workflow. Do not edit unless you know what you are doing.
- Common Gulp tasks for Build workflow. Do not edit unless you know what you are doing.
- Common Gulp tasks for Export workflow (compiled and formated bundles). Do not edit unless you know what you are doing.
-
Development directory. This is place of developers creativity. Change anything as you wish.
/gfx
β graphic assets/js
β JavaScripts, all files in this directory will be concatenated into one file; files are sorted by name/scss
_variables.scss
β copy from the Bootstrap core for your customization.bootstrap.scss
β copy from the Bootstrap core for your customization.c-article.scss
β example of the BEM component Article.custom.scss
β main stlesheet for customization of the project. Contains additions and overriding of the Bootstrap.u-debugger.scss
β only in Developmnet workflow adds outline and info around HTML element with [BEM namespaces](BEM component. Outlines objectso-
, componentc-
and utilitiesu-
. To enable functionality set$show-debugger
totrue
in the file_variables.scss
.u-show-grid.scss
β only in Developmnet workflow adds small box into bottom right corner with information about current viewport size accoding to Bootstrap. In the file_variables.scss
set$show-grid
totrue
and see bars as Bootstrap grid columns.
/templates
/pages
β every*.html
file will be rendered as standalone HTML page on own URL (directory name). Meta attributes passes from according Markdown file in./content
directory./partials
βlayout-default.html
β main layout which extends files in./templates/pages
font.list
β tab-delimeted format for gulp-google-webfonts which download font files and CSS to the project.
- Content of this directory will be coppied into target (temp, export or build directory).
-
.browserslistrc
β Browserslist configuration to share target browsers versions between different front-end tools as Autoprefixer, Babel etc. The configuration is a copy of the Bootstrap configuration in this repo..editorconfig
β basic definition of code formatting for different code editors and IDEs. These settings are used as a baseline for language specialised linters in this repo. Further info.env.example
β template of the.env
file, where stored fragments of the code shouldnβt be part of repoβs codebase, e.g. login to FTP..eslintignore
β list of the files and directories to be ignore by Eslint..eslintrc.yml
β Eslint configuration to specify and configure rules of JavaScript linting. Further info.gitattributes
β path-specific settings used by Git. Settings that Git applies to certain subdirectories or subsets of files - for example EOL (End Of Line) setting. Further info.gitignore
β list of path-specific pattern to be ignored (not commited) by Git. Further info.prettierignore
β list of the files and directories to be ignore by Prettier..prettierrc.yml
β Prettier configuration to specify and configure rules of language specific code formatting..release-it.yml
β Release It! configuration to specify behaviour of the versioning and package publishing related tasks..remarkignore
β list of the files and directories to be ignore by Remark..remarkrc.yml
β Remark configuration to specify and configure rules of Markdown lintng..stylelintignore
β list of the files and directories to be ignore by Stylelint..stylelintrc.yml
β Stylelint configuration to specify and configure rules of CSS (SCSS) linting. See used plugins! Further infocommitlint.config.js
β commitlint configuration to help adhering to a commit convention.gulpconfig.js
β configuration for π οΈ development Gulp filegulpfile.js
. Contains variables and setting which are specific for Development workflow purposes.gulpconfig-build.js
β configuration for π― build Gulp filegulpfile-build.js
. Contains variables and setting which are specific for Build workflow purposes.gulpconfig-export.js
β configuration for ποΈ export Gulp filegulpfile-export.js
. Contains variables and setting which are specific for Export workflow purposes.gulpfile.js
β Gulp π οΈ development configuration and definition of automation tasks. Further infogulpfile-build.js
β Gulp π― build configuration and definition of automation tasks. Further infogulpfile-export.js
β Gulp ποΈ export configuration and definition of automation tasks. Further infoCHANGELOG.md
β list of the notable changes in this project.keepachangelog.hbs
β auto-changelog template for generatingCHANGELOG.md
.LICENSE
β Open source license of Git repository. It enables others to freely use, change and distribute the project in the repository. Further infopackage.json
β NPM packages specifics. It lists the packages (with their versions) your project depends on. Further infopackage-lock.json
β NPM manifest. Automatically generated with change ofnode_modules
orpackage.json
if working with NPM. Holds information about which versions of each dependency were installed in order to get consistent installs across machines. Further infoREADME.md
β Itβs me!
Starts watchers, compilers etc., for development with hot-reload in the browser.
-
Run development task
npm run dev
-
Open Browser on URL
http://localhost:4000
or what you see in command-line. -
Modify files in
src
directory a sub-directories. -
Changes in the configuration files requires a restart. Stop dev task and run
npm run dev
again.
Produces optimized files in production quality.
-
Run build task
npm run build
-
See files in
build
directory.
Produces optimized and formated files with good readability of the code.
-
Run build task
npm run export
-
See files in
export
directory.
-
create a branch in your projectβs repo (e.g.
devstack-lite-update
)git checkout -b devstack-lite-update
-
Add this Gulp DevStack as a remote to your project
devstack
git remote add devstack-lite git@github.com:cebreus/gulp-devstack-lite.git
-
Fetch remote
git fetch devstack-lite
-
Merge
devstack-lite-update
to your branch (e.g.master
) (use--allow-unrelated-histories
if necessary)git merge master
-
solve eventual conflicts
-
push the devstack-update branch
git push -u devstack-lite-update
-
create PR from
devstack-lite-update
to your master
git remote add devstack-lite git@github.com:cebreus/gulp-devstack-lite.git
git fetch devstack-lite
git merge devstack-lite master --squash --allow-unrelated-histories
git commit -m "feat: Gulp DevStack init"
Optional clenup
> CHANGELOG.md
rm LICENSE
curl https://gist.githubusercontent.com/cebreus/a6010a2a95a4f2375830b0af3193f2f9/raw/cde6d9c68f2605b34eb5b8710bd553e7ad28a678/minimalistic-readme > README.md
See the open issues for a list of proposed features (and known issues).
Contributions are what makes the open-source community such a fantastic place to learn, inspire, and create. Any contributions you make are much appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (`git commit -m "feat: Add some AmazingFeature")
- Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
It is distributed under the MIT License. See LICENSE
for more information.
Jaroslav VrΓ‘na β cebreus@live.com, web site
Project Link: github.com/cebreus/gulp-devstack-lite