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 the name value in the new project's package.json file
• Description - (Optional) Defines the description value in the new project's package.json file
• Repo - (Optional) Defines the repository field in the new project's package.json file and adds the origin git remote
• Local URL - (Required) Adds an npm script called open:local which will open the local site in your default browser
• Dev URL - (Required) Adds an npm script called open:dev which will open the dev site in your default browser
• Production URL - (Required) Adds an npm script called open: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