Skip to content

Instantly share code, notes, and snippets.

@tobiasdalhof
Last active September 24, 2016 15:16
Show Gist options
  • Save tobiasdalhof/cf5866c22489decd891026796145722a to your computer and use it in GitHub Desktop.
Save tobiasdalhof/cf5866c22489decd891026796145722a to your computer and use it in GitHub Desktop.
October CMS with Gulp, Less and LiveReload
/**
* Dependencies
*/
var gulp = require('gulp');
var glob = require('glob');
var less = require('gulp-less');
var gutil = require('gulp-util');
var plumber = require('gulp-plumber');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var groupmedia = require('gulp-group-css-media-queries');
var livereload = require('gulp-livereload');
/**
* less / CSS processes
*/
gulp.task('css', function() {
gulp.src('assets/less/theme.less')
.pipe(plumber({ // Logs errors and makes a beep
errorHandler: function (err) {
gutil.beep();
console.log(err);
}
}))
.pipe(less()) // Compile our less
.pipe(autoprefixer('last 20 versions')) // Add browser prefixes
.pipe(groupmedia()) // Group media queries
.pipe(minifycss()) // Minify
.pipe(gulp.dest('assets/css')) // Pipe the output to our css directory
.pipe(livereload())
});
/**
* Watches the file system for changes
*/
gulp.task('watch', function() {
gulp.watch([
'content/*.htm', // Watch OctoberCMS .htm files
'layouts/*.htm',
'pages/*.htm',
'partials/*.htm',
'assets/less/**/*.less' // Watch for .less files
], ['css']);
livereload.listen();
})
gulp.task('default', ['watch']);
{
"name": "October CMS Demo",
"version": "1.0.0",
"description": "Demo Theme",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Tobias Dalhof",
"license": "ISC",
"devDependencies": {
"glob": "^4.3.1",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^2.0.0",
"gulp-group-css-media-queries": "^1.0.0",
"gulp-less": "^3.1.0",
"gulp-livereload": "^3.8.1",
"gulp-minify-css": "^0.3.11",
"gulp-plumber": "^0.6.6",
"gulp-util": "^3.0.1"
}
}
@tobiasdalhof
Copy link
Author

tobiasdalhof commented Sep 24, 2016

First, you drop the files inside your root theme folder. Then you run npm install and gulp or gulp watch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment