From 5d46cd003b72bfe42bc6be2225d38e075df702f3 Mon Sep 17 00:00:00 2001 From: Gael Hatchue Date: Fri, 26 Dec 2014 16:49:08 -0500 Subject: [PATCH] add more complete Less support --- app/index.js | 34 +++++++++- templates/common/app/styles/main.css | 11 ++++ templates/common/app/styles/main.scss | 91 --------------------------- templates/common/root/_Gruntfile.js | 68 +++++++++++++++----- templates/common/root/_package.json | 3 +- 5 files changed, 96 insertions(+), 111 deletions(-) delete mode 100644 templates/common/app/styles/main.scss diff --git a/app/index.js b/app/index.js index d1ed800ee..04a7c882d 100644 --- a/app/index.js +++ b/app/index.js @@ -181,8 +181,28 @@ Generator.prototype.askForCompass = function askForCompass() { }.bind(this)); }; +Generator.prototype.askForLess = function askForLess() { + var compass = this.compass; + var cb = this.async(); + + this.prompt([{ + type: 'confirm', + name: 'less', + message: 'Would you like to use Less?', + default: true, + when: function (props) { + return !compass; + } + }], function (props) { + this.less = props.less; + + cb(); + }.bind(this)); +}; + Generator.prototype.askForBootstrap = function askForBootstrap() { var compass = this.compass; + var less = this.less; var cb = this.async(); this.prompt([{ @@ -198,9 +218,18 @@ Generator.prototype.askForBootstrap = function askForBootstrap() { when: function (props) { return props.bootstrap && compass; } + }, { + type: 'confirm', + name: 'lessBootstrap', + message: 'Would you like to use the Less version of Bootstrap?', + default: true, + when: function (props) { + return props.bootstrap && less; + } }], function (props) { this.bootstrap = props.bootstrap; this.compassBootstrap = props.compassBootstrap; + this.lessBootstrap = props.lessBootstrap; cb(); }.bind(this)); @@ -310,10 +339,11 @@ Generator.prototype.readIndex = function readIndex() { }; Generator.prototype.bootstrapFiles = function bootstrapFiles() { - var cssFile = 'styles/main.' + (this.compass ? 's' : '') + 'css'; + var cssFile = 'styles/main.css'; + var mainFile = 'styles/main.' + (this.less ? 'less' : (this.compass ? 's' : '') + 'css'); this.copy( path.join('app', cssFile), - path.join(this.appPath, cssFile) + path.join(this.appPath, mainFile) ); }; diff --git a/templates/common/app/styles/main.css b/templates/common/app/styles/main.css index ae7a83f32..1a5d852db 100644 --- a/templates/common/app/styles/main.css +++ b/templates/common/app/styles/main.css @@ -1,3 +1,14 @@ +<% if (compass) { %>//bower:scss +//endbower<% } else if (less) { %>//bower:less +//endbower<% } %> + +.browsehappy { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + /* Space out content a bit */ body { padding-top: 20px; diff --git a/templates/common/app/styles/main.scss b/templates/common/app/styles/main.scss deleted file mode 100644 index 6839a643b..000000000 --- a/templates/common/app/styles/main.scss +++ /dev/null @@ -1,91 +0,0 @@ -<% if (compassBootstrap) { %>$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/"; -<% } %>// bower:scss -// endbower - -.browsehappy { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - -/* Space out content a bit */ -body { - padding-top: 20px; - padding-bottom: 20px; -} - -/* Everything but the jumbotron gets side spacing for mobile first views */ -.header, -.marketing, -.footer { - padding-left: 15px; - padding-right: 15px; -} - -/* Custom page header */ -.header { - border-bottom: 1px solid #e5e5e5; - - /* Make the masthead heading the same height as the navigation */ - h3 { - margin-top: 0; - margin-bottom: 0; - line-height: 40px; - padding-bottom: 19px; - } -} - -/* Custom page footer */ -.footer { - padding-top: 19px; - color: #777; - border-top: 1px solid #e5e5e5; -} - -.container-narrow > hr { - margin: 30px 0; -} - -/* Main marketing message and sign up button */ -.jumbotron { - text-align: center; - border-bottom: 1px solid #e5e5e5; - - .btn { - font-size: 21px; - padding: 14px 24px; - } -} - -/* Supporting marketing content */ -.marketing { - margin: 40px 0; - - p + h4 { - margin-top: 28px; - } -} - -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 768px) { - .container { - max-width: 730px; - } - - /* Remove the padding we set earlier */ - .header, - .marketing, - .footer { - padding-left: 0; - padding-right: 0; - } - /* Space out the masthead */ - .header { - margin-bottom: 30px; - } - /* Remove the bottom border on the jumbotron for visual effect */ - .jumbotron { - border-bottom: 0; - } -} diff --git a/templates/common/root/_Gruntfile.js b/templates/common/root/_Gruntfile.js index 3059fccbc..0517a4be3 100644 --- a/templates/common/root/_Gruntfile.js +++ b/templates/common/root/_Gruntfile.js @@ -55,6 +55,10 @@ module.exports = function (grunt) { compass: { files: ['<%%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], tasks: ['compass:server', 'autoprefixer'] + },<% } else if (less) { %> + less: { + files: ['<%%= yeoman.app %>/styles/{,*/}*.less'], + tasks: ['less:dist', 'autoprefixer'] },<% } else { %> styles: { files: ['<%%= yeoman.app %>/styles/{,*/}*.css'], @@ -177,11 +181,17 @@ module.exports = function (grunt) { wiredep: { app: { src: ['<%%= yeoman.app %>/index.html'], - ignorePath: /\.\.\// + ignorePath: /\.\.\//<% if (lessBootstrap) { %>, + exclude: ['bootstrap/dist/css/bootstrap.css']<% } %> }<% if (compass) { %>, sass: { src: ['<%%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], ignorePath: /(\.\.\/){1,2}bower_components\// + }<% } else if (less) { %>, + less: { + src: ['<%%= yeoman.app %>/styles/{,*/}*.less'], + ignorePath: /(\.\.\/){1,2}bower_components\//<% if (!lessBootstrap) { %>, + exclude: ['bootstrap/less/bootstrap.less']<% } %> }<% } %> },<% if (coffee) { %> @@ -238,6 +248,23 @@ module.exports = function (grunt) { debugInfo: true } } + },<% } else if (less) { %> + + // Compiles Less to CSS and generates necessary files if requested + less: { + options: { + compile: true, + paths: ['./bower_components'] + }, + dist: { + files: [{ + expand: true, + cwd: '<%%= yeoman.app %>/styles', + src: '{,*/}*.less', + dest: '.tmp/styles/', + ext: '.css' + }] + } },<% } %> // Renames files for browser caching purposes @@ -388,42 +415,48 @@ module.exports = function (grunt) { dest: '<%%= yeoman.dist %>/images', src: ['generated/*'] }<% if (bootstrap) { %>, { - expand: true, - cwd: '<% if (!compassBootstrap) { - %>bower_components/bootstrap/dist<% - } else { - %>.<% - } %>', - src: '<% if (compassBootstrap) { - %>bower_components/bootstrap-sass-official/assets/fonts/bootstrap<% - } else { %>fonts<% } - %>/*', + expand: true,<% if (compassBootstrap) { %> + cwd: 'bower_components/bootstrap-sass-official/assets', + src: 'fonts/bootstrap/*'<% } else { %> + cwd: 'bower_components/bootstrap/dist', + src: 'fonts/*'<% } %>, dest: '<%%= yeoman.dist %>' }<% } %>] - }, + }<% if (compassBootstrap || lessBootstrap) { %>, + server: { + expand: true,<% if (compassBootstrap) { %> + cwd: 'bower_components/bootstrap-sass-official/assets', + src: 'fonts/bootstrap/*'<% } else { %> + cwd: 'bower_components/bootstrap/dist', + src: 'fonts/*'<% } %>, + dest: '.tmp', + }<% } %><% if (!compass && !less) { %>, styles: { expand: true, cwd: '<%%= yeoman.app %>/styles', dest: '.tmp/styles/', src: '{,*/}*.css' - } + }<% } %> }, // Run some tasks in parallel to speed up the build process concurrent: { server: [<% if (coffee) { %> 'coffee:dist',<% } %><% if (compass) { %> - 'compass:server'<% } else { %> + 'compass:server'<% } else if (less) { %> + 'less:dist'<% } else { %> 'copy:styles'<% } %> ], test: [<% if (coffee) { %> 'coffee',<% } %><% if (compass) { %> - 'compass'<% } else { %> + 'compass'<% } else if (less) { %> + 'less'<% } else { %> 'copy:styles'<% } %> ], dist: [<% if (coffee) { %> 'coffee',<% } %><% if (compass) { %> - 'compass:dist',<% } else { %> + 'compass:dist',<% } else if (less) { %> + 'less:dist',<% } else { %> 'copy:styles',<% } %> 'imagemin', 'svgmin' @@ -449,7 +482,8 @@ module.exports = function (grunt) { } grunt.task.run([ - 'clean:server', + 'clean:server',<% if (compassBootstrap || lessBootstrap) { %> + 'copy:server',<% } %> 'wiredep', 'concurrent:server', 'autoprefixer', diff --git a/templates/common/root/_package.json b/templates/common/root/_package.json index 5b75d13d7..103fdc42e 100644 --- a/templates/common/root/_package.json +++ b/templates/common/root/_package.json @@ -8,7 +8,8 @@ "grunt-concurrent": "^1.0.0", "grunt-contrib-clean": "^0.6.0",<% if (coffee) { %> "grunt-contrib-coffee": "^0.12.0",<% } %><% if (compass) { %> - "grunt-contrib-compass": "^1.0.0",<% } %> + "grunt-contrib-compass": "^1.0.0",<% } else if (less) { %> + "grunt-contrib-less": "^0.10.0",<% } %> "grunt-contrib-concat": "^0.5.0", "grunt-contrib-connect": "^0.9.0", "grunt-contrib-copy": "^0.7.0",