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
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
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
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.Create the database:
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!
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 email@example.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:
You should review the content of the file
gulpconfig.js in particular the line:
In the file
gulpfile.js you will see the line:
return gulp.src(config.theme_path + '/sass/styles.scss')
sass/styles.scssfile and by extension if you are
@importing your partials into
styles.scssthan any changes to those will be compiled into