Grunt tasks for refactoring code.
Grunt tasks for refactoring code
As a proof-of-concept, the project is using (mostly) out-of-the-box Grunt tasks for converting SASS/SCSS to LESS and CSS to LESS. But as a broader goal, the project is focused on finding relatively simple ways to refactor massive amounts of code.
Just download the project and then run
npm install to install all of the project's dependencies. After everything is installed, run
grunt, and you will see an official shload of SASS/SCSS files get refactored to LESS.
- grunt-rename: enables file renaming based on patterns.
- grunt-string-replace : "replaces strings on files by using string or regex patterns. Attempts to be a String.prototype.replace adapter task for your grunt project".
- assemble-less: "Compile LESS to CSS, with options for creating 'bundles', individual components, themes or whatever makes you happy". This task is used
Oh ho, hoho scoodlie do, I am sooo glad you asked that question! Not really, but you know what, yes I did say "refactor", and this project does a freakin' amazing job of almost doing a good job. If I had to guess, which I hate doing btw, it gets you somewhere between 97-104% of the way there.
In a nutshell, here is how it works:
- grabs a bunch of
.scssfiles from each defined
- changes the file extensions to
- removes the silly underscores from file names. Lol, underscores.
- does some other really cool things you'll have to learn for yourself (this is just a way of buying me time until I can convince the author of that plugin to add more cool things)
- grabs a bunch of
replacetask then, well, replaces... things. But if you insist I get technical, the task:
- grabs each newly created
- uses a series of (mostly) simple regex patterns to find and replace SASS syntax with LESS syntax. Like this gem (seriously, take it easy on me. I'm not like you, I can't just pickup a copy of "Regex Weekly" and get down to business. This stuff hurted my brain.)
- grabs each newly created
pattern: //greplacement: "transition(e('$2$3')"
A bunch, actually. For instance:
- Variables: from:
- Mixins: from:
- Import statements: cleaned up, but see below.
- Remove all SASS
- A ton of other "one-off" stuff commented in the Gruntfile...
In the ./test/ folder you will find files from bootstrap-sass and foundation. I converted the
.scss from both libraries to LESS to help me stay focused on implementing practical patterns. I was actually pleasantly surprised at how close I came to converting all of the Bootstrap
.scss files back to LESS. Try doing a diff between the converted sass files and "native" bootstrap less files (v2.3.1) - it's not feature complete, but it saves a lot of time.
Let's just say, enough to get you fired if you're adventurous enough to use this on anything that pays your bills.
- Import statements: LESS cannot do comma separated lists of values, as SASS does. But this is easy to do if you're refactoring manually.
@elseand other magic that LESS doesn't do. These will have to be addressed by your actual brain, personally. (or impersonally, that's your call)
- More described in the code comments.
To install this grunt plugin on your project simply do:
npm install grunt-string-replace
Then add this line to your project's
Gruntfile.js file add a section named
replace. This section specifies the files to edit, destinations, patterns and replacements.
This defines what files this task will edit and must follow Gruntfile Files mapping.
This controls how this task operates and should contain key:value pairs, see options below.
This option will hold all your pattern/replacement pairs. A pattern/replacement pair should contain key:value pairs containing:
replace:options:replacements:pattern: /\/\//igreplacement: "'$1'"pattern: ","replacement: ";"
Note: If the pattern is a string, only the first occurrence will be replaced, as stated on String.prototype.replace.
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Special thanks to Erick Ruiz de Chavez for creating grunt-string-replace. This isn't a fork of that project, because I'm using other tasks as well, but it might as well be because this project wouldn't exist without it. Please visit grunt-string-replace and star it!
Copyright (c) 2013 Jon Schlinkert, and the authors of tasks utilized herein.
Licensed under the MIT license.