Dev Diary: Yeoman, Gulp-notify and JSHint

After noticing a coworker having difficulties downloading a linting package for Atom (most likely due to the proxy)—and knowing some here are comfortable developing with old Dreamweaver CS6 (corporate standard)—I decided to take a new approach: CS6 is old, yet it is still usable.

After updating the Yeoman generator, called Codekeepr, the following message was sent to all devs to encourage them to upgrade.

Hi All,
CodeKeepr has been upgraded to v2.0.0.
New Feature! As the Web landscape grows increasingly complex, it’s important to keep your tools sharpened. Dreamweaver CS6 is one of those tools in desperate need of sharpening. Good news, CodeKeepr 2.0.0 automates CSS and JavaScript linting and works in tandem with Dreamweaver! It will detect problematic patterns and signs of inefficiency and report them immediately on save.
CSS error notification
New Feature! Modular development is the breaking down of a page into parts that are of a more manageable size and have a well-defined purpose. Many here are already developing modular code, e.g., slots, but this new addition makes every coder develop with a modular mindset at the outset of a project. Additionally, modular components are easier to copy and paste into new projects for reuse — saving a considerable amount of development time.
New Feature! Easily switch between landing and sale event template code.
Bug: Gulp was unable to detect new files while running. In order to resolve the issue, Gulp had to be restarted. This is no longer a problem.
Need an old project upgraded to the new workflow? Stop on over.
Enjoy,
Aaron

JavaScript template conflict

While updating the Yeoman generator I found out EJS templating caused a conflict. Gulp-notify uses them, e.g., <%= error.message %>, but that wasn’t the problem.

var onError = function(err) {
notify.onError({
title: 'CSS error',
message: 'Location: <%= error.message %>',
sound: 'Beep'
})(err);
        this.emit('end');
};

Within index.js, of CodeKeepr, fs.copyTpl was used inappropriately. Because copyTpl uses EJS template syntax it conflicted with my setup in Gulp-notify. After updating the following…

tasks: function () {
this.fs.copyTpl(
this.templatePath('tasks'),
this.destinationPath(dateYourApp + '/v01/tasks/')
);
},

…to…

tasks: function () {
this.fs.copy(
this.templatePath('tasks'),
this.destinationPath(dateYourApp + '/v01/tasks/')
);
},

…the conflict was resolved.


sass.js now includes gulp-rename and gulp-notify.

javascript.js now uses gulp-rename, gulp-notify, gulp-jshint, and jshint-stylish.

That’s it for today! See you next time.



Disclaimer: The Dev Diary is written every day and previous articles are not updated. Code may work today but glitches will be found tomorrow. Do your due diligence and thoroughly test any code authored here before implementing into your own project. Good luck!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.