Front End Tooling for Backdrop CMS

Sharpening your tools is an important part of any developers life cycle and can help you deliver solid, maintainable sites using best practices, efficiently and on budget.  The tools I'll discuss in this post:

• drush ~ quickly spin up new Backdrop CMS projects and add your favorite contrib modules
• gulp ~ task runner and SASS management.
• PHP Codesniffer ~ check coding style and stay inline with Backdrop CMS coding standards and make life easy on you and your team!

If you haven't already install the backdrop drush extension in your ~/.drush/extensions/backdrop folder.

git clone https://github.com/backdrop-contrib/drush.git ~/.drush/extensions/backdrop

Now that you have the backdrop drush extension installed you can quickly spin up a backdrop site, your favorite modules and and get developing your features and theme.  Some of the features in this post are experimental and in pre-alpa development to use them checkout the dev branch, but be warned that some of these features break the D7 or D8 versions of the drush command. So, if you are using drush and swithching back and forth between Backdrop, D7 and D8 projects be sure to checkout the 1.x-0.x branch of the backdrop drush extension which is compatible with both D7 and D8. Once we stabilize the features in the dev branch they will be merged into the main 1.x-0.x branch and releases will be made accordingly.

Here are the steps to download and install backdrop without leaving the command line.

mysql -uroot -p -e "create database mybackdrop;";

drush dlb backdrop --path="my-backdrop"
drush si --db-url="mysql://root:pass@localhost/mybackdrop"

Since we installed Backdrop from the command line the config json files were set up using the user that ran the drush command. To allow the Backdrop site to write to these files we need to give them the correct permissions. Here is the command:

sudo chmod -R 770 files/

Now you can visit your shiny new Backdrop site in your browser!

Next step is setting up Gulp. Gulp is a task runner and we will use it to compile and watch our sass/theming changes, run PHP Code standard checks, javascript code standards, and CSS code standards! Wow! First things first we need a gulpfile.js, gulpconfig.js, and a package.json it the root of our Backdrop project. I've created a backdrop-gulp-starter repo that I use to spin up all my backdrop projects. Download that repo and move the files into the root of your Backdrop project:

git clone git@github.com:serundeputy/backdrop-gulp-starter.git
mv backdrop-gulp-starter/gulpfile.js .
mv backdrop-gulp-starter/gulpconfig.js .
mv backdrop-gulp-starter/package.json .
rm -rf backdrop-gulp-starter

Notice the dots "." at the end of those mv commands. Those commands move the files from the backdrop-gulp-starter directory to the current directory. We can then remove the backdrop-gulp-starter directory as we just use it get these files into our Backdrop project root.

We now need to install the node modules that are specified in the package.json file. This will install gulp and its dependencies for us. To do that you need to have node.js installed on your system. I find the easiest way to do that is with homebrew. Here is a blog post on installing node via homebrew on Mac OSX: How to Install Node.js and NPM on a Mac.

Now that you have node installed to get gulp and its dependencies just issue the command:

npm install

You should review the content of the file gulpconfig.js in particular the line:

theme_path: 'themes/yourtheme',

In the file gulpfile.js you will see the line:

return gulp.src(config.theme_path + '/sass/styles.scss')

themes/my_backdrop/
  * css/
    * styles.css
  * sass/
    * styles.scss
    * partials/

gulp watch