re-integration of grunt

This commit is contained in:
Mike Francis 2014-02-21 10:23:33 +00:00
parent 24c1cde9c6
commit 694fd64bd3
4 changed files with 55 additions and 63 deletions

View File

@ -15,7 +15,7 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The
* Customised functions.php adding theme support for high customisation
* Minimised HTTP requests for high Web Performance
* Localised strings for multiple language support
* Gulp.js integration - automatic image optimisation, Sass compiling and watching, and css minification
* Grunt.js integration - automatic image optimisation, Sass compiling and watching, css minification and live reload support
## Installation
@ -24,7 +24,11 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The
* Bourbon gem
* Neat gem
* Node.js
* Gulp.js
* Grunt.js
#### Optional
* [LiveReload Chrome plugin](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
Clone/download the barebones repositories into your WordPress /wp-content/themes/ directory, then open /barebones/ in a command line tool, such as Mac Terminal, then first install the bourbon/neat gems if you haven't already:
@ -37,15 +41,15 @@ Then install bourbon/neat to the theme's css folder
$ bourbon install
$ neat install
and run the following to install all of this project's Gulp dependencies:
and run the following to install all of this project's Grunt dependencies:
$ npm install --save-dev
Then run `gulp` to run all your Gulp tasks, which includes watching the Sass folders.
Then run `grunt`:
## WordPress Support
Compatible with WordPress 3.2 and above.
Compatible with WordPress 3.2 and above, but always use the latest version.
## Browser Support
@ -58,5 +62,4 @@ Compatible with WordPress 3.2 and above.
## Roadmap
* ~~Phase out Internet Explorer 7 support~~
* ~~Refactor CSS using `box-sizing: border-box`~~
* Organisation of Sass folders

View File

@ -1,47 +0,0 @@
var gulp = require('gulp'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
paths = {
css: './css/*.scss',
img: './img/**',
js: './js/*.js'
};
gulp.task('sass', function() {
gulp.src(paths.css)
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('.'));
});
gulp.task('img', function() {
gulp.src(paths.img)
.pipe(imagemin())
.pipe(gulp.dest('./img/'))
});
gulp.task('lint', function() {
gulp.src(paths.js)
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest('.'));
});
gulp.task('scripts', function() {
gulp.src(paths.js)
.pipe(concat('script.js'))
.pipe(gulp.dest('.'));
// .pipe(rename('all.min.js'))
// .pipe(uglify())
// .pipe(gulp.dest('.'))
});
gulp.task('watch', function() {
gulp.watch(paths.css, ['sass']);
gulp.watch(paths.js, ['lint', 'scripts']);
});
gulp.task('default', ['sass', 'img', 'lint', 'scripts', 'watch']);

40
js/Gruntfile.js Normal file
View File

@ -0,0 +1,40 @@
module.exports = function(grunt) {
grunt.initConfig({
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'img/',
src: ['*.{png,jpg,gif}'],
dest: 'img/'
}]
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: { 'style.css': 'css/style.scss' }
}
},
watch: {
css: {
files: ['css/*.scss'],
tasks: ['sass'],
options: {
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['imagemin', 'sass', 'watch']);
};

14
package.json Normal file → Executable file
View File

@ -1,14 +1,10 @@
{
"name": "barebones",
"private": true,
"version": "0.1.0",
"devDependencies": {
"gulp-rename": "~0.2.2",
"gulp": "~3.5.2",
"gulp-uglify": "~0.2.0",
"gulp-concat": "~2.1.7",
"gulp-jshint": "~1.4.0",
"gulp-sass": "~0.6.0",
"gulp-imagemin": "~0.1.5"
"grunt": "~0.4.2",
"grunt-contrib-sass": "~0.5.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-imagemin": "~0.5.0"
}
}
}