Created
July 12, 2016 19:24
-
-
Save d0whc3r/a2a853996d43fe49b1c295da4bb58608 to your computer and use it in GitHub Desktop.
grunt-injector include sass files to main.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// file:Gruntfile.js | |
module.exports = function(grunt) { | |
// Time how long tasks take. Can help when optimizing build times | |
require('time-grunt')(grunt); | |
// Automatically load required Grunt tasks | |
require('jit-grunt')(grunt, { | |
// [...] | |
injector: 'grunt-injector' | |
}); | |
grunt.initConfig({ | |
// [...] | |
// Inject custom js and scss files | |
injector: { | |
target: { | |
options: { | |
relative: true | |
}, | |
files: { | |
'<%= yeoman.app %>/index.html': ['<%= yeoman.app %>/scripts/*/**/*.js'], | |
} | |
}, | |
sass: { | |
options: { | |
starttag: '// <!-- injector:{{ext}} -->', | |
endtag: '// <!-- endinjector -->', | |
relative: true, | |
ignorePath: 'main.scss', | |
transform: function(filepath) { | |
var file = filepath.split('/').slice(-1)[0]; | |
// remove extension | |
file = file.split('.').slice(0, -1).join('.'); | |
// remove "_" | |
if (file.substr(0, 1) === '_') { | |
file = file.substr(1); | |
} | |
var path = filepath.split('/').slice(0, -1).join('/') + '/'; | |
if (path === '/') { | |
path = ''; | |
} | |
var fpath = path + file; | |
if (!fpath) { | |
return; | |
} | |
return '@import \'' + fpath + '\';' | |
} | |
}, | |
files: { | |
'<%= yeoman.app %>/styles/main.scss': ['<%= yeoman.app %>/styles/**/*.scss', '<%= yeoman.app %>/scripts/**/*.scss'], | |
} | |
} | |
} | |
}); | |
} | |
// Add 'injector' task where you need in 'grunt.registerTask' function |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- file:app/index.html --> | |
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>App title</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width"> | |
<!-- build:css(.) styles/vendor.css --> | |
<!-- bower:css --> | |
<!-- endbower --> | |
<!-- endbuild --> | |
<!-- build:css(.tmp) styles/main.css --> | |
<link rel="stylesheet" href="styles/main.css"> | |
<!-- endbuild --> | |
</head> | |
<body> | |
<!-- [...] --> | |
<!-- build:js(.) scripts/vendor.js --> | |
<!-- bower:js --> | |
<!-- endbower --> | |
<!-- endbuild --> | |
<!-- build:js({.tmp,app}) scripts/scripts.js --> | |
<script src="scripts/app.js"></script> | |
<!-- injector:js --> | |
<!-- endinjector --> | |
<!-- endbuild --> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// file:app/styles/main.scss | |
// <!-- injector:scss --> | |
// <!-- endinjector --> | |
// [...] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment