From 694fd64bd33962f6b530a128d8a6585614be2695 Mon Sep 17 00:00:00 2001 From: Mike Francis Date: Fri, 21 Feb 2014 10:23:33 +0000 Subject: [PATCH] re-integration of grunt --- README.md | 17 ++++++++++------- gulpfile.js | 47 ----------------------------------------------- js/Gruntfile.js | 40 ++++++++++++++++++++++++++++++++++++++++ package.json | 14 +++++--------- 4 files changed, 55 insertions(+), 63 deletions(-) delete mode 100644 gulpfile.js create mode 100644 js/Gruntfile.js mode change 100644 => 100755 package.json diff --git a/README.md b/README.md index 77c9b8d..4bed29e 100644 --- a/README.md +++ b/README.md @@ -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 \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index b593293..0000000 --- a/gulpfile.js +++ /dev/null @@ -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']); \ No newline at end of file diff --git a/js/Gruntfile.js b/js/Gruntfile.js new file mode 100644 index 0000000..7dd58c4 --- /dev/null +++ b/js/Gruntfile.js @@ -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']); + +}; \ No newline at end of file diff --git a/package.json b/package.json old mode 100644 new mode 100755 index 24ae9c8..6d9ac92 --- a/package.json +++ b/package.json @@ -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" } -} \ No newline at end of file +}