@dameblanche/task-templates v0.0.1-alpha.5
Dameblanche
The code in this project is to be used as the base for "every" project.
The purpose of this project is that we reach a singular workflow for our FE projects.
Getting started
First install dameblanche
curl -o /usr/local/bin/dameblanche https://raw.githubusercontent.com/Prophets/dameblanche/develop/bash/dameblanche && chmod 755 /usr/local/bin/dameblanche
Create a new project with:
dameblanche project-folder-name
Or you can run dameblanche within an empty directory
mkdir project-folder-name
cd project-folder-name
dameblanche
Or use -n flag to disable git initialisation
dameblanche -n project-folder-name
Dameblanche clones from the master branch by default but it is possible to use another branch
dameblanche -b 13-prefix-commit-messages-with-branch-name project-folder-name
Features | Tools Used |
---|---|
CSS | Sass (Libsass via node-sass), Autoprefixer, Source Maps |
JavaScript | Babel, Webpack |
HTML | Nunjucks, gulp-data |
Images | Compression with imagemin |
Symbols | Auto-generated SVG Sprites |
Live Updating | BrowserSync, Webpack Dev Middleware, Webpack Hot Middleware |
Production Builds | JS and CSS are uglified and minified, filename md5 hashing (reving), file size reporting |
Usage
Make sure Node is installed. We recommend using NVM to manage versions.
This has been tested on Node 10.5.0
and NPM 6.7.0
, and should work on newer versions as well. File an issue if it doesn't!
Install Dependencies
npm ci
Run development tasks:
npm run start
This is where the magic happens. The perfect front-end workflow. This runs the default gulp task, which starts compiling, watching, and live updating all our files as we change them. BrowserSync will start a server on port 3000, or do whatever you've configured it to do. You'll be able to see live changes in all connected browsers. Don't forget about the additional BrowserSync tools available on port 3001!
Why run this as an npm script? NPM scripts add ./node_modules/bin to the path when run, using the packages version installed with this project, rather than a globally installed ones. Never npm install -g
and get into mis-matched version issues again. These scripts are defined in the scripts
property of package.json
.
To run any other existing task, simply add the task name after the npm run start
command. Example:
npm run start eslint
Build production files:
npm run build
This will compile revisioned and compressed files to ./public
.
Configuration
Directory and top level settings are convienently exposed in gulpfile.js/config.json
. Use this file to update paths to match the directory structure of your project, and to adjust task options.
All task configuration objects have src
and dest
directories specfied. These are relative to root.src
and root.dest
respectively. Each configuration also has an extensions array. This is used for file watching, and file deleting/replacing.
If there is a feature you do not wish to use on your project, simply delete the configuration, and the task will be skipped.
Not all configuration is exposed here. For advanced task configuration, you can always edit the tasks themselves in gulpfile.js/tasks
.
Clean configuration
By default, the entire dest
directory is deleted before each build. By setting the clean.patterns
option in config.js, you can specify (using globbing syntax) patterns that should be deleted instead. Use this if you have subdirectories or files within the dest
directory that should be left alone (media uploaded through a CMS, say).
'clean': {
'patterns': [
'./public/css',
'./public/images',
'./public/js',
'./public/rev-manifest.json'
]
}
Asset Details
A README.md
with details about each asset type are available in their respective folders in the src
directory:
Helpful tools
Sublime packages
Editor Config
EditorConfig helps developers maintain consistent coding styles between different editors
Install the sublime package so Sublime Text uses the settings in .editorconfig
Sublime Linter
To have ESLint and Stylelint warning- and error output in Sublime Text, use the awesome Sublime Linter
- Install the SublimeLinter framework
- Install the SublimeLinter-eslint
- Install the SublimeLinter-stylelint
Nunjucks syntax definitions
Nunjucks syntax for Sublime Text will make sure you have the right syntax highlighting
There's a small issue though: the package doesn't place the .tmlanguage
in the correct folder
The fix is simple enough though:
cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages
mkdir "Nunjucks Syntax" && cd Nunjucks\ Syntax/
- paste this file there
- open a .njk file (for example: src/templates/index.njk), and choose "open all with current extension as" > "Nunjucks" from the syntax menu in the bottom right corner of Sublime Text
Useful Sublime Text settings
Add these to your settings, for a nicer overall Sublime Text experience. Also contains some useful defaults that are enforced when linting.
{
"binary_file_patterns":
[
"node_modules/**",
"vendor/**",
"*.jpg",
"*.jpeg",
"*.png",
"*.gif",
"*.ttf",
"*.tga",
"*.dds",
"*.ico",
"*.eot",
"*.pdf",
"*.swf",
"*.jar",
"*.zip"
],
"file_exclude_patterns":
[
".DS_Store",
"Desktop.ini",
"*.pyc",
"._*",
"Thumbs.db",
".Spotlight-V100",
".Trashes",
"*.sublime-workspace",
".zfproject.xml",
"composer.lock",
"zend_cache--*"
],
"folder_exclude_patterns":
[
".sass-cache",
".git",
"nbproject",
".svn",
".hg",
"CVS",
".bin"
],
"highlight_line": true,
"highlight_modified_tabs": true,
"hot_exit": false,
"ignored_packages":
[
"Vintage"
],
"indent_guide_options":
[
"draw_normal",
"draw_active"
],
"match_brackets": true,
"match_brackets_angle": true,
"shift_tab_unindent": true,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": true,
"ensure_newline_at_eof_on_save": true
}
3 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago