Skip to content

Instantly share code, notes, and snippets.

@d0whc3r
Created July 12, 2016 19:24
Show Gist options
  • Save d0whc3r/a2a853996d43fe49b1c295da4bb58608 to your computer and use it in GitHub Desktop.
Save d0whc3r/a2a853996d43fe49b1c295da4bb58608 to your computer and use it in GitHub Desktop.
grunt-injector include sass files to main.scss
// 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
<!-- 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>
// 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