Nov 15, 2015

Introducing Sclfd

If you've done front end web development for more than a few weeks, you're already familiar with the variety of tools and frameworks available: Grunt, Gulp, Webpack, Browserify, Angular, React, Aurelia, Babel, TypeScript, CoffeeScript… And pretty much every one has a preferred way of setting all of this up to their liking.

This can be seen by the vast number of Yeoman generators available in the npm registry. A few weeks ago, I was considering writing such a generator myself to quickly build projects around my favorite setup using Gulp, TypeScript and Angular. But after reading up on it, I decided that process was a lot more complicated than I needed it to be.

So instead of writing a Yeoman generator, I set out to write a simple project scaffolding tool and Scfld was born.

Why should I care about Scfld?

Well, besides the clever name, Scfld plugins are very simple to create. So you could quickly build a plugin for your favorite project type or even a whole library of them.

And it's not just for front end projects either. You can create a plugin to template any structure of files and folders.

Easy, you say?

Yep, pretty easy, there's even a plugin to build plugins. Follow the instructions below to get started, you'll need to have Node installed. Scfld has been tested with Node 0.12.7 and npm 3.x.

First, install Scfld and its plugin:

npm i -g scfld scfld-plugin

Then create an empty folder and initialize your new plugin

scfld init plugin

Answer a few questions and your first plugin will be ready. To try it, make it available to npm as a globally installed module:

npm link

Then go to another empty folder and generate a new project with your plugin

scfld init <plugin-name>

There you go, your new plugin created a new project.

Cool, but that project does nothing… how do I make it useful?

Let's take a look at your new custom plugin in your editor of choice, as you can see, there's not much in there:

Plugin layout

index.js is the entry point for your plugin. Scfld expects it to export an object with an init method. This method returns a promise which, when resolved, passes an object to Scfld.

    options: {
      data: answers
    sources: [
      path.join(__dirname, 'template')
    globalDeps: [],
    postInit: []

The following data is expected:

  • options: options passed to the template engine
    • data: dictionary used to render the templates
  • sources: array of paths containing template files, they will be processed in order into the destination folder
  • globalDeps: array of strings containing the names of npm modules that should be installed globally. Scfld will only install them if missing
  • postInit: array of strings containing shell commands that should be executed once the project is initialized.

The template folder contains the files that will form the generated project. It's purely a convention and you're free to organize your plugin any way you wish. Those files will be treated as templates so you can customize the file content with user input. The template engine is ejs-harmony.

Ok, got some examples?

Checkout npm for available plugins. For example, scfld-ng-ts will show you how to generate an Angular application using Gulp and TypeScript.

Alright, sold. What can I do to help?

If you build a plugin you think others would use, publish it on npm and share it with the rest of us!

Want to do even more? Fork Scfld on GitHub, improve it and send a pull request.

Comments powered by Disqus