README
40Dev Tools
CLI tools for the 40Digits dev team.
Note: There are some dependencies that are added to new projects that are currently not compatible with Node v6. For now only use this tool with Node v5.11 and below.
Installation
npm install 40dev-tools -g
Usage
40d [command] [options]
Options:
-h, --help output usage information
-V, --version output the version number
Motivation
At 40Digits we are always striving to speed up the time it takes to start a new project. We have created a few boilerplates for common platforms, like Wordpress and Craft, to keep us from having to do rework every time we start a new project. On top of that we have come up with a fairly opinionated development process that can be carried over into almost any platform that we work on. This includes writing Sass, minifying images, creating sprites, and bundling JavaScript modules. All of them have npm scripts to do the work, and most of them come with starter files.
So the question is do we copy all of these scripts and starter files into all of our boilerplates? You may agree that this is not the most maintainable solution. If we change a build tool in one of the boilerplates then we need to do it for all of them. And as the list of the platforms that we work on expands that means we need to create more boilerplates with more maintenance tap dancing.
40dev-tools
was created to allow us to maintain platform boilerplates and starter tools separately, while at the same time allowing only one step to get both at the same time when starting a new project.
Presets are simply JSON configuration files that define which tools to pull and the scripts, devDependencies, etc. that may be specific to that platform. The project is built programmatically from a combination of the preset configuration and the developer options that are defined through a prompt in the command line.
Currently this tool can only create a new
project. Eventually we would like to add other tools that can help us speed up our development, like add tools to existing projects.
Commands
new Spin up a new project with build tools baked right in.
help [cmd] display help for [cmd]
new
Spin up a new project with build tools baked right in. Running this command without options will display a list of the available project generators to choose from.
The <dest>
argument is required.
Usage
40d new [options] <dest>
Options
-h, --help output usage information
-p, --preset [preset] The name of a configuration preset.
-v, --verbose Verbose logging.
Presets
These are the current presets to choose from to start a new project. (More to come!)
craft A preset for scaffolding a new Craft project.
default Includes all tools with no framework.
email A framework for creating html emails.
react-universal A universal React app.
wordpress A preset for scaffolding a new WordPress project.
Prompt Options
These options are collected immediately after selecting a preset with the new
command. The following options are prompted by default for all presets.
Project Name
- (Required) This name may be used in many places, but mainly it defines thename
value in the new project'spackage.json
fileDescription
- (Optional) Defines thedescription
value in the new project'spackage.json
fileRepo
- (Optional) Defines therepository
field in the new project'spackage.json
file and adds theorigin
git remoteLocal URL
- (Required) Adds an npm script calledopen:local
which will open the local site in your default browserDev URL
- (Required) Adds an npm script calledopen:dev
which will open the dev site in your default browserProduction URL
- (Required) Adds an npm script calledopen:prod
which will open the production site in your default browser
Some presets, like Wordpress for example, will prompt for more options.
The prompt that we're using to collect this info is Inquirer. Check out the project README if you have questions about how to use it.
Tools
Depending on the preset you use, each new project will get some or all of these tools. Each of them are matched with npm scripts which take source (not production-ready) files in the _src
directory and produce production-ready assets in the assets
directory or wherever the npm script says to put them.
Each tool with have two npm scripts at least: build:[tool]
and watch:[tool]
. build:[tool]
will do a single compile, while watch:[tool]
will watch the corresponding directory and run the corresponding build
script when changes are made.
In addition to each tool-level script, there will most likely be a master build
and watch
script which will run all of the build:[tool]
or watch[tool]
scripts in parallel.
Be sure to take a look at the package.json
file that is produced in the new project for a more accurate knowledge of what scripts are created out of the box. Feel free to change them to the specific needs of your project.
- "images": Minify src images.
- "js": Bundle JavaScript modules.
- "postcss": Compile tomorrow's CSS into today's CSS.
- "sass": Compile Sass to CSS.
- "sprites": Create sprite sheets from individual png's.
- "static": Compile HTML files from EJS templates.
- "symbols": Create svg sprites from individual svg's.
Not familiar with using npm scripts? Here's an excellent article to get you up to speed.
Usage
npm run build:[tool]
npm run watch:[tool]
Contributing
...TBD