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.
npm install 40dev-tools -g
40d [command] [options]
-h, --help output usage information -V, --version output the version number
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.
new Spin up a new project with build tools baked right in. help [cmd] display help for [cmd]
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.
<dest> argument is required.
40d new [options] <dest>
-h, --help output usage information -p, --preset [preset] The name of a configuration preset. -v, --verbose Verbose logging.
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.
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 the
namevalue in the new project's
Description- (Optional) Defines the
descriptionvalue in the new project's
Repo- (Optional) Defines the
repositoryfield in the new project's
package.jsonfile and adds the
Local URL- (Required) Adds an npm script called
open:localwhich will open the local site in your default browser
Dev URL- (Required) Adds an npm script called
open:devwhich will open the dev site in your default browser
Production URL- (Required) Adds an npm script called
open:prodwhich will open the production site in your default browser
Some presets, like Wordpress for example, will prompt for more options.
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] 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
watch script which will run all of the
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.
- "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.
npm run build:[tool]
npm run watch:[tool]