Commit 2fe8fed7 authored by Thomas Park's avatar Thomas Park
Browse files

add grunt server and grunt watch, closes #284

parent 6bda0ec0
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
......@@ -46,11 +47,29 @@ module.exports = function (grunt) {
}
},
watch: {
files: ['*/variables.less', '*/bootswatch.less'],
files: ['*/variables.less', '*/bootswatch.less', '*/index.html'],
tasks: 'build',
options: {
livereload: true,
nospawn: true
}
},
connect: {
base: {
options: {
port: 3000,
livereload: true,
open: true
}
},
keepalive: {
options: {
port: 3000,
livereload: true,
keepalive: true,
open: true
}
}
}
});
......@@ -60,6 +79,13 @@ module.exports = function (grunt) {
var theme = theme == undefined ? grunt.config('buildtheme') : theme;
var compress = compress == undefined ? true : compress;
var isValidTheme = grunt.file.exists(theme, 'variables.less') && grunt.file.exists(theme, 'bootswatch.less');
// cancel the build (without failing) if this directory is not a valid theme
if (!isValidTheme) {
return;
}
var concatSrc;
var concatDest;
var lessDest;
......@@ -95,13 +121,13 @@ module.exports = function (grunt) {
grunt.task.run('build:'+t);
});
grunt.registerTask('default', 'build a theme', function() {
grunt.task.run('swatch');
});
grunt.event.on('watch', function(action, filepath) {
var path = require('path');
var theme = path.dirname(filepath);
grunt.config('buildtheme', theme);
});
grunt.registerTask('server', 'connect:keepalive')
grunt.registerTask('default', ['connect:base', 'watch']);
};
......@@ -106,11 +106,12 @@
<h1 id="customization">Customization</h1>
<p>To modify a theme or create your own, follow the steps below in your terminal. You'll need to have <a href="https://help.github.com/articles/set-up-git" target="_blank">Git</a> and <a href="http://nodejs.org/" target="_blank">Node</a> installed.</p>
<ol>
<li><p><code>git clone https://github.com/thomaspark/bootswatch.git</code></p></li>
<li><p><code>npm install</code></p></li>
<li><p>Edit <code>variables.less</code> and <code>bootswatch.less</code> in one of the theme directories, or create your own in <code>/custom</code>.</p></li>
<li><p>Type <code>grunt swatch:[theme]</code> to build the CSS for a theme, e.g., <code>grunt swatch:amelia</code> for Amelia. Or type <code>grunt swatch</code> to build them all at once. To have <code>grunt</code> available in the command line, install <code>grunt-cli</code> as described on the <a href="http://gruntjs.com/getting-started">Grunt Getting Started page</a>.</p></li>
<li><p>You can also run <code>grunt watch</code> to watch for any changes to the LESS files and automatically build a theme on change.</p></li>
<li><p>Download the repository: <code>git clone https://github.com/thomaspark/bootswatch.git</code></p></li>
<li><p>Install dependencies: <code>npm install</code></p></li>
<li><p>Make sure that you have <code>grunt</code> available in the command line. You can install <code>grunt-cli</code> as described on the <a href="http://gruntjs.com/getting-started">Grunt Getting Started page</a>.</p></li>
<li><p>Modify <code>variables.less</code> and <code>bootswatch.less</code> in one of the theme directories, or create your own in <code>/custom</code>.</p></li>
<li><p>Type <code>grunt swatch:[theme]</code> to build the CSS for a theme, e.g., <code>grunt swatch:amelia</code> for Amelia. Or type <code>grunt swatch</code> to build them all at once. </p></li>
<li><p>You can run <code>grunt</code> to start a server, watch for any changes to the LESS files, and automatically build a theme and reload it on change. Run <code>grunt server</code> for just the server, and <code>grunt watch</code> for just the watcher.</p></li>
</ol>
<p>Here are additional tips for <a href="http://www.smashingmagazine.com/2013/03/12/customizing-bootstrap/" target="_blank">customizing Bootstrap</a>.</p>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment