i have project started yeoman webapp generator out compass support.
now need integrate less files (not bootstrap) app. need add them grunt compile them , minify in distribution. there proper way edit gruntfile achieve this?
my gruntfile looks
'use strict'; // # globbing // performance reasons we're matching 1 level down: // 'test/spec/{,*/}*.js' // if want recursively match subfolders, use: // 'test/spec/**/*.js' module.exports = function (grunt) { // time how long tasks take. can when optimizing build times require('time-grunt')(grunt); // automatically load required grunt tasks require('jit-grunt')(grunt, { useminprepare: 'grunt-usemin' }); // configurable paths var config = { app: 'app', dist: 'dist' }; // define configuration tasks grunt.initconfig({ // project settings config: config, // watches files changes , runs tasks based on changed files watch: { bower: { files: ['bower.json'], tasks: ['wiredep'] }, babel: { files: ['<%= config.app %>/scripts/{,*/}*.js'], tasks: ['babel:dist'] }, babeltest: { files: ['test/spec/{,*/}*.js'], tasks: ['babel:test', 'test:watch'] }, gruntfile: { files: ['gruntfile.js'] }, sass: { files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'], tasks: ['sass:server', 'postcss'] }, styles: { files: ['<%= config.app %>/styles/{,*/}*.css'], tasks: ['newer:copy:styles', 'postcss'] } }, browsersync: { options: { notify: false, background: true }, livereload: { options: { files: [ '<%= config.app %>/{,*/}*.html', '.tmp/styles/{,*/}*.css', '<%= config.app %>/images/{,*/}*', '.tmp/scripts/{,*/}*.js' ], port: 9000, server: { basedir: ['.tmp', config.app], routes: { '/bower_components': './bower_components' } } } }, test: { options: { port: 9001, open: false, loglevel: 'silent', host: 'localhost', server: { basedir: ['.tmp', './test', config.app], routes: { '/bower_components': './bower_components' } } } }, dist: { options: { background: false, server: '<%= config.dist %>' } } }, // empties folders start fresh clean: { dist: { files: [{ dot: true, src: [ '.tmp', '<%= config.dist %>/*', '!<%= config.dist %>/.git*' ] }] }, server: '.tmp' }, // make sure code styles par , there no obvious mistakes eslint: { target: [ 'gruntfile.js', '<%= config.app %>/scripts/{,*/}*.js', '!<%= config.app %>/scripts/vendor/*', 'test/spec/{,*/}*.js' ] }, // mocha testing framework configuration options mocha: { all: { options: { run: true, urls: ['http://<%= browsersync.test.options.host %>:<%= browsersync.test.options.port %>/index.html'] } } }, // compiles es6 babel babel: { options: { sourcemap: true }, dist: { files: [{ expand: true, cwd: '<%= config.app %>/scripts', src: '{,*/}*.js', dest: '.tmp/scripts', ext: '.js' }] }, test: { files: [{ expand: true, cwd: 'test/spec', src: '{,*/}*.js', dest: '.tmp/spec', ext: '.js' }] } }, // compiles sass css , generates necessary files if requested sass: { options: { sourcemap: true, sourcemapembed: true, sourcemapcontents: true, includepaths: ['.'] }, dist: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] }, server: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] } }, postcss: { options: { map: true, processors: [ // add vendor prefixed styles require('autoprefixer-core')({ browsers: ['> 1%', 'last 2 versions', 'firefox esr', 'opera 12.1'] }) ] }, dist: { files: [{ expand: true, cwd: '.tmp/styles/', src: '{,*/}*.css', dest: '.tmp/styles/' }] } }, // automatically inject bower components html file wiredep: { app: { src: ['<%= config.app %>/index.html'], exclude: ['bootstrap.js'], ignorepath: /^(\.\.\/)*\.\./ }, sass: { src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'], ignorepath: /^(\.\.\/)+/ } }, // renames files browser caching purposes filerev: { dist: { src: [ '<%= config.dist %>/scripts/{,*/}*.js', '<%= config.dist %>/styles/{,*/}*.css', '<%= config.dist %>/images/{,*/}*.*', '<%= config.dist %>/styles/fonts/{,*/}*.*', '<%= config.dist %>/*.{ico,png}' ] } }, // reads html usemin blocks enable smart builds automatically // concat, minify , revision files. creates configurations in memory // additional tasks can operate on them useminprepare: { options: { dest: '<%= config.dist %>' }, html: '<%= config.app %>/index.html' }, // performs rewrites based on rev , useminprepare configuration usemin: { options: { assetsdirs: [ '<%= config.dist %>', '<%= config.dist %>/images', '<%= config.dist %>/styles' ] }, html: ['<%= config.dist %>/{,*/}*.html'], css: ['<%= config.dist %>/styles/{,*/}*.css'] }, // following *-min tasks produce minified files in dist folder imagemin: { dist: { files: [{ expand: true, cwd: '<%= config.app %>/images', src: '{,*/}*.{gif,jpeg,jpg,png}', dest: '<%= config.dist %>/images' }] } }, svgmin: { dist: { files: [{ expand: true, cwd: '<%= config.app %>/images', src: '{,*/}*.svg', dest: '<%= config.dist %>/images' }] } }, htmlmin: { dist: { options: { collapsebooleanattributes: true, collapsewhitespace: true, conservativecollapse: true, removeattributequotes: true, removecommentsfromcdata: true, removeemptyattributes: true, removeoptionaltags: true, // true impact styles attribute selectors removeredundantattributes: false, useshortdoctype: true }, files: [{ expand: true, cwd: '<%= config.dist %>', src: '{,*/}*.html', dest: '<%= config.dist %>' }] } }, // default, `index.html`'s <!-- usemin block --> take care // of minification. these next options pre-configured if not // wish use usemin blocks. // cssmin: { // dist: { // files: { // '<%= config.dist %>/styles/main.css': [ // '.tmp/styles/{,*/}*.css', // '<%= config.app %>/styles/{,*/}*.css' // ] // } // } // }, // uglify: { // dist: { // files: { // '<%= config.dist %>/scripts/scripts.js': [ // '<%= config.dist %>/scripts/scripts.js' // ] // } // } // }, // concat: { // dist: {} // }, // copies remaining files places other tasks can use copy: { dist: { files: [{ expand: true, dot: true, cwd: '<%= config.app %>', dest: '<%= config.dist %>', src: [ '*.{ico,png,txt}', 'images/{,*/}*.webp', '{,*/}*.html', 'styles/fonts/{,*/}*.*' ] }, { expand: true, dot: true, cwd: '.', src: 'bower_components/bootstrap-sass/assets/fonts/bootstrap/*', dest: '<%= config.dist %>' }] } }, // run tasks in parallel speed build process concurrent: { server: [ 'babel:dist', 'sass:server' ], test: [ 'babel' ], dist: [ 'babel', 'sass', 'imagemin', 'svgmin' ] } }); grunt.registertask('serve', 'start server , preview app', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'browsersync:dist']); } grunt.task.run([ 'clean:server', 'wiredep', 'concurrent:server', 'postcss', 'browsersync:livereload', 'watch' ]); }); grunt.registertask('server', function (target) { grunt.log.warn('the `server` task has been deprecated. use `grunt serve` start server.'); grunt.task.run([target ? ('serve:' + target) : 'serve']); }); grunt.registertask('test', function (target) { if (target !== 'watch') { grunt.task.run([ 'clean:server', 'concurrent:test', 'postcss' ]); } grunt.task.run([ 'browsersync:test', 'mocha' ]); }); grunt.registertask('build', [ 'clean:dist', 'wiredep', 'useminprepare', 'concurrent:dist', 'postcss', 'concat', 'cssmin', 'uglify', 'copy:dist', 'filerev', 'usemin', 'htmlmin' ]); grunt.registertask('default', [ 'newer:eslint', 'test', 'build' ]); };
you need install grunt-contrib-less task , add configuration similar following, gruntfile.js.
less: { development: { options: { paths: ["assets/css"] }, files: { "path/to/result.css": "path/to/source.less" } } } to minify css, take @ grunt-contrib-cssmin can configure like:
cssmin: { options: { shorthandcompacting: false, roundingprecision: -1 }, target: { files: { 'output.css': ['foo.css', 'bar.css'] } } } to load these tasks add:
grunt.loadnpmtasks('grunt-contrib-less'); grunt.loadnpmtasks('grunt-contrib-cssmin'); and if want have them both run under 1 task:
grunt.registertask('lessmin', ['less', 'cssmin']); which can run command line with:
grunt lessmin 
Comments
Post a Comment