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.
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:
rename
task:
.scss
files from each defined src
.less
replace
task then, well, replaces... things. But if you insist I get technical, the task:
.less
file{
pattern: /(transition\()(.*)(?=,)(.*\b)/g,
replacement: "transition(e('$2$3')"
}
A bunch, actually. For instance:
$
, to: @
@mixin
and @include
, to: .
!default
declarationsadjust-hue
with spin
fade-in
with fadein
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.
@if
, @else
and other magic that LESS doesn't do. These will have to be addressed by your actual brain, personally. (or impersonally, that's your call)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
:
grunt.loadNpmTasks('grunt-string-replace');
Inside your Gruntfile.js
file add a section named replace
. This section specifies the files to edit, destinations, patterns and replacements.
object
This defines what files this task will edit and must follow Gruntfile Files mapping.
object
This controls how this task operates and should contain key:value pairs, see options below.
array
This option will hold all your pattern/replacement pairs. A pattern/replacement pair should contain key:value pairs containing:
string
or regex
string
replace: {
options: {
replacements: [
{
pattern: /\/(asdf|qwer)\//ig,
replacement: "'$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.