gruntjs

Why gives Grunt / Recess an error and Lessc not when compiling Bootstrap 3 RC1?

蓝咒 提交于 2019-12-04 04:17:07
问题 I add some code to mixins.less: img { &:extend(.img-responsive); } See also: Images not responsive by default in Twitter Bootstrap 3? and https://stackoverflow.com/a/15573240/1596547 When i run grunt dist from the command line i got: Running "recess:bootstrap" (recess) task >> Parser error in less/mixins.less >> 549. img { >> 550. &:extend(.img-responsive); >> 551. } Warning: Use --force to continue. Aborted due to warnings. But when i compile it with Lessc: lessc bootstrap.less i don't find

Grunt task: Delete lines between markers in an HTML file

和自甴很熟 提交于 2019-12-04 04:04:18
问题 In development we test the unminified css files. On build we compress and combine them. I would like to then remove the uncompressed css link elements between the first two comments, and uncomment the link to the generated combined.min.css file. Any ideas! <!-- __css --> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/base.css" /> <!-- css__ --> <!-- __cssmin <link rel="stylesheet" href="css/combined.min.css" /> cssmin__ --> Thanks! 回答1: You don't mention how

Why does Yeoman build without /styles/fonts?

让人想犯罪 __ 提交于 2019-12-04 03:53:54
After running grunt build I'm left with no fonts directory inside dist/styles . What am I doing wrong? Here's what I have in the Gruntfile.js : compass: { options: { sassDir: '<%= yeoman.app %>/styles', cssDir: '.tmp/styles', imagesDir: '<%= yeoman.app %>/../images', javascriptsDir: '<%= yeoman.app %>/scripts', fontsDir: '<%= yeoman.app %>/../styles/fonts', importPath: 'app/bower_components', relativeAssets: true, }, dist: { options: { imagesDir: '<%= yeoman.dist %>/images', fontsDir: '<%= yeoman.app %>/../styles/fonts' } }, server: { options: { debugInfo: true } } }, The compass task isn't

How to use grunt-html installed globally?

[亡魂溺海] 提交于 2019-12-04 03:52:23
I would like to use grunt-html task to check my HTML files. I install the task locally with npm install grunt-html and use it in grunt.js as follows: module.exports = function (grunt) { grunt.loadNpmTasks('grunt-html'); grunt.initConfig({ htmllint:{ all:['*.html'] }, }); }; Now I would like to install the grunt-html task globally . Unfortunately after removing the local grunt-html node module and installing it globally grunt fails to load the task. While running grunt htmllint I get: >> Local Npm module "grunt-html" not found. Is it installed? If I remove grunt.loadNpmTasks('grunt-html'); from

How to use an HTML minifier with underscore templates

白昼怎懂夜的黑 提交于 2019-12-04 03:46:52
I have some templates for my frontend code, like: <div class="row"> <div class="my-header col-md-1"> <!-- comments --> {{ title }} </div> <div class="my-container col-md-11"> {% if (content) { %} {{ content }} {% } else { %} <p>Empty</p> {% } %} </div> </div> And I'm using grunt-contrib-jst to store them all in a single file and then on another build step will be included in a single JS file and that file is pushed to the CDN. This part is working perfectly, but I want to use the processContent option to minify the HTML template code, which contains Undercore template delimiters ( <%...%>

Wrong CSS Path - Live Reload issue with Grunt

梦想与她 提交于 2019-12-04 02:49:05
I have this setup in my Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ less: { development: { options: { compress: false, yuicompress: false, optimization: 0 }, files: { // target.css file: source.less file "assets/css/main.css": "assets/css/main.less" }, } }, watch: { styles: { // Which files to watch (all .less files recursively in the less directory) files: ['assets/css/*.less', 'assets/less/*.less'], tasks: ['less'], }, // Live reload CSS css: { files: ['assets/css/*.css'], options: { nospawn: true, interrupt: false, livereload: true, }, }, }, }); // Watch grunt

Use the Bootstrap config.json file with Bower

萝らか妹 提交于 2019-12-04 02:47:43
I used the Bootstrap customizer tool: http://getbootstrap.com/customize/ It generates a config.json file that I reuse whenever I need to make changes. I use Bower to handle all my dependencies, except Bootstrap, because I need my customized version. Is there a way I can tell Bower to use my config.json file to generate the CSS? The chosen answer to this question seems to state that it is actually possible, but it doesn't give much details and I couldn't find anything else about that anywhere: Twitter Bootstraps config.json - what does it do? I also found this package that lets you customize

How does Ember.js reference Grunt.js precompiled Handlebars templates?

这一生的挚爱 提交于 2019-12-04 02:39:58
I've been exploring Ember.js, along with Grunt.js but I can't understand how Ember.js is able to find and use precompiled Handlebars templates. Right now my Gruntfile.js looks like this: module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), handlebars: { compile: { files: { "js/templates.js": "templates/*.hbs", } } } }); // Load the plugin that handles the handlebars compiling grunt.loadNpmTasks('grunt-contrib-handlebars'); // Default task(s). grunt.registerTask('default', ['handlebars']); }; And my app.js Ember views are

Compile LESS to multiple CSS files, based on variable value

孤街醉人 提交于 2019-12-04 02:31:55
问题 Having a single variable that specifies a color within a variables.less file (e.g. @themeColor: #B30F55; ), and a .json file that constitutes a list of entities, where each key is an entity ID and the value of the key is that entity's color (e.g. '8ab834f32' : '#B30F55', '3cc734f31' : '#99981F' ), how could I run a Grunt task that outputs as many independent CSS files as there are entities in the json, after substituting the variable value? 回答1: You can define a different task for each color.

grunt-bower-install: exclude certain components

我的未来我决定 提交于 2019-12-04 02:15:41
I just created a new webapp using the angular-fullstack yeoman generator. I noticed that grunt-bower-install is generating the JS bower components in my index.html files between the <!-- bower:js --> tags. <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script> <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script> <script src="bower_components