admin管理员组

文章数量:1331849

Has anyone e across an issue using pass with yeoman and grunt where the stylesheets are not being piled in their build. I'm new at this and trying to really understand whats going on behind the scenes. Any help would be appreciated.

Thanks!

  'use strict';
  var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
  var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
  };

  module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // configurable paths
    var yeomanConfig = {
      app: 'app',
      dist: 'dist'
    };

    try {
      yeomanConfig.app = require('./ponent.json').appPath || yeomanConfig.app;
    } catch (e) {}

    grunt.initConfig({
      yeoman: yeomanConfig,
      watch: {
        coffee: {
          files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
          tasks: ['coffee:dist']
        },
        coffeeTest: {
          files: ['test/spec/{,*/}*.coffee'],
          tasks: ['coffee:test']
        },
        pass: {
          files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
          tasks: ['pass']
        },
        livereload: {
          files: [
            '<%= yeoman.app %>/{,*/}*.html',
            '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
            '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
            'images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
          ],
          tasks: ['livereload']
        }
      },
      connect: {
        options: {
          port: 9000,
          // Change this to '0.0.0.0' to access the server from outside.
          hostname: 'localhost'
        },
        livereload: {
          options: {
            middleware: function (connect) {
              return [
                lrSnippet,
                mountFolder(connect, '.tmp'),
                mountFolder(connect, yeomanConfig.app)
              ];
            }
          }
        },
        test: {
          options: {
            middleware: function (connect) {
              return [
                mountFolder(connect, '.tmp'),
                mountFolder(connect, 'test')
              ];
            }
          }
        }
      },
      open: {
        server: {
          url: 'http://localhost:<%= connect.options.port %>'
        }
      },
      clean: {
        dist: {
          files: [{
            dot: true,
            src: [
              '.tmp',
              '<%= yeoman.dist %>/*',
              '!<%= yeoman.dist %>/.git*'
            ]
          }]
        },
        server: '.tmp'
      },
      jshint: {
        options: {
          jshintrc: '.jshintrc'
        },
        all: [
          'Gruntfile.js',
          '<%= yeoman.app %>/scripts/{,*/}*.js'
        ]
      },
      karma: {
        unit: {
          configFile: 'karma.conf.js',
          singleRun: true
        }
      },
      coffee: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/scripts',
            src: '{,*/}*.coffee',
            dest: '.tmp/scripts',
            ext: '.js'
          }]
        },
        test: {
          files: [{
            expand: true,
            cwd: 'test/spec',
            src: '{,*/}*.coffee',
            dest: '.tmp/spec',
            ext: '.js'
          }]
        }
      },
      pass: {
        options: {
          sassDir: '<%= yeoman.app %>/styles',
          cssDir: '.tmp/styles',
          imagesDir: 'images',
          javascriptsDir: '<%= yeoman.app %>/scripts',
          fontsDir: '<%= yeoman.app %>/styles/fonts',
          importPath: '<%= yeoman.app %>/ponents',
          relativeAssets: true
        },
        dist: {},
        server: {
          options: {
            debugInfo: true
          }
        }
      },
      concat: {
        dist: {
          files: {
            '<%= yeoman.dist %>/scripts/scripts.js': [
              '.tmp/scripts/{,*/}*.js',
              '<%= yeoman.app %>/scripts/{,*/}*.js'
            ]
          }
        }
      },
      useminPrepare: {
        html: '<%= yeoman.app %>/index.html',
        options: {
          dest: '<%= yeoman.dist %>'
        }
      },
      usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
          dirs: ['<%= yeoman.dist %>']
        }
      },
      imagemin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/images',
            src: '{,*/}*.{png,jpg,jpeg}',
            dest: '<%= yeoman.dist %>/images'
          }]
        }
      },
      cssmin: {
        dist: {
          files: {
            '<%= yeoman.dist %>/styles/main.css': [
              '.tmp/styles/{,*/}*.css',
              '<%= yeoman.app %>/styles/{,*/}*.css'
            ]
          }
        }
      },
      htmlmin: {
        dist: {
          options: {
            /*removeCommentsFromCDATA: true,
            // 
            //collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeAttributeQuotes: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeOptionalTags: true*/
          },
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>',
            src: ['*.html', 'views/*.html'],
            dest: '<%= yeoman.dist %>'
          }]
        }
      },
      cdnify: {
        dist: {
          html: ['<%= yeoman.dist %>/*.html']
        }
      },
      ngmin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.dist %>/scripts',
            src: '*.js',
            dest: '<%= yeoman.dist %>/scripts'
          }]
        }
      },
      uglify: {
        dist: {
          files: {
            '<%= yeoman.dist %>/scripts/scripts.js': [
              '<%= yeoman.dist %>/scripts/scripts.js'
            ]
          }
        }
      },
      rev: {
        dist: {
          files: {
            src: [
              '<%= yeoman.dist %>/scripts/{,*/}*.js',
              '<%= yeoman.dist %>/styles/{,*/}*.css',
              'images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
              '<%= yeoman.dist %>/styles/fonts/*'
            ]
          }
        }
      },
      copy: {
        dist: {
          files: [{
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>',
            dest: '<%= yeoman.dist %>',
            src: [
              '*.{ico,txt}',
              '.htaccess',
              'ponents/**/*',
              'images/{,*/}*.{gif,webp}',
              'styles/fonts/*'
            ]
          }]
        }
      }
    });

    grunt.renameTask('regarde', 'watch');

    grunt.registerTask('server', [
      'clean:server',
      'coffee:dist',
      'pass:server',
      'livereload-start',
      'connect:livereload',
      'open',
      'watch'
    ]);

    grunt.registerTask('test', [
      'clean:server',
      'coffee',
      'pass',
      'connect:test',
      'karma'
    ]);

    grunt.registerTask('build', [
      'clean:dist',
      // 'jshint',
      // 'test',
      // 'coffee',
      'pass:dist',
      'useminPrepare',
      'imagemin',
      'cssmin',
      'htmlmin',
      'concat',
      'copy',
      // 'cdnify',
      'ngmin',
      'uglify',
      'rev',
      'usemin'
    ]);

    grunt.registerTask('default', ['build']);
  };

Has anyone e across an issue using pass with yeoman and grunt where the stylesheets are not being piled in their build. I'm new at this and trying to really understand whats going on behind the scenes. Any help would be appreciated.

Thanks!

  'use strict';
  var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
  var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
  };

  module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // configurable paths
    var yeomanConfig = {
      app: 'app',
      dist: 'dist'
    };

    try {
      yeomanConfig.app = require('./ponent.json').appPath || yeomanConfig.app;
    } catch (e) {}

    grunt.initConfig({
      yeoman: yeomanConfig,
      watch: {
        coffee: {
          files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
          tasks: ['coffee:dist']
        },
        coffeeTest: {
          files: ['test/spec/{,*/}*.coffee'],
          tasks: ['coffee:test']
        },
        pass: {
          files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
          tasks: ['pass']
        },
        livereload: {
          files: [
            '<%= yeoman.app %>/{,*/}*.html',
            '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
            '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
            'images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
          ],
          tasks: ['livereload']
        }
      },
      connect: {
        options: {
          port: 9000,
          // Change this to '0.0.0.0' to access the server from outside.
          hostname: 'localhost'
        },
        livereload: {
          options: {
            middleware: function (connect) {
              return [
                lrSnippet,
                mountFolder(connect, '.tmp'),
                mountFolder(connect, yeomanConfig.app)
              ];
            }
          }
        },
        test: {
          options: {
            middleware: function (connect) {
              return [
                mountFolder(connect, '.tmp'),
                mountFolder(connect, 'test')
              ];
            }
          }
        }
      },
      open: {
        server: {
          url: 'http://localhost:<%= connect.options.port %>'
        }
      },
      clean: {
        dist: {
          files: [{
            dot: true,
            src: [
              '.tmp',
              '<%= yeoman.dist %>/*',
              '!<%= yeoman.dist %>/.git*'
            ]
          }]
        },
        server: '.tmp'
      },
      jshint: {
        options: {
          jshintrc: '.jshintrc'
        },
        all: [
          'Gruntfile.js',
          '<%= yeoman.app %>/scripts/{,*/}*.js'
        ]
      },
      karma: {
        unit: {
          configFile: 'karma.conf.js',
          singleRun: true
        }
      },
      coffee: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/scripts',
            src: '{,*/}*.coffee',
            dest: '.tmp/scripts',
            ext: '.js'
          }]
        },
        test: {
          files: [{
            expand: true,
            cwd: 'test/spec',
            src: '{,*/}*.coffee',
            dest: '.tmp/spec',
            ext: '.js'
          }]
        }
      },
      pass: {
        options: {
          sassDir: '<%= yeoman.app %>/styles',
          cssDir: '.tmp/styles',
          imagesDir: 'images',
          javascriptsDir: '<%= yeoman.app %>/scripts',
          fontsDir: '<%= yeoman.app %>/styles/fonts',
          importPath: '<%= yeoman.app %>/ponents',
          relativeAssets: true
        },
        dist: {},
        server: {
          options: {
            debugInfo: true
          }
        }
      },
      concat: {
        dist: {
          files: {
            '<%= yeoman.dist %>/scripts/scripts.js': [
              '.tmp/scripts/{,*/}*.js',
              '<%= yeoman.app %>/scripts/{,*/}*.js'
            ]
          }
        }
      },
      useminPrepare: {
        html: '<%= yeoman.app %>/index.html',
        options: {
          dest: '<%= yeoman.dist %>'
        }
      },
      usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
          dirs: ['<%= yeoman.dist %>']
        }
      },
      imagemin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/images',
            src: '{,*/}*.{png,jpg,jpeg}',
            dest: '<%= yeoman.dist %>/images'
          }]
        }
      },
      cssmin: {
        dist: {
          files: {
            '<%= yeoman.dist %>/styles/main.css': [
              '.tmp/styles/{,*/}*.css',
              '<%= yeoman.app %>/styles/{,*/}*.css'
            ]
          }
        }
      },
      htmlmin: {
        dist: {
          options: {
            /*removeCommentsFromCDATA: true,
            // https://github./yeoman/grunt-usemin/issues/44
            //collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeAttributeQuotes: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeOptionalTags: true*/
          },
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>',
            src: ['*.html', 'views/*.html'],
            dest: '<%= yeoman.dist %>'
          }]
        }
      },
      cdnify: {
        dist: {
          html: ['<%= yeoman.dist %>/*.html']
        }
      },
      ngmin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.dist %>/scripts',
            src: '*.js',
            dest: '<%= yeoman.dist %>/scripts'
          }]
        }
      },
      uglify: {
        dist: {
          files: {
            '<%= yeoman.dist %>/scripts/scripts.js': [
              '<%= yeoman.dist %>/scripts/scripts.js'
            ]
          }
        }
      },
      rev: {
        dist: {
          files: {
            src: [
              '<%= yeoman.dist %>/scripts/{,*/}*.js',
              '<%= yeoman.dist %>/styles/{,*/}*.css',
              'images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
              '<%= yeoman.dist %>/styles/fonts/*'
            ]
          }
        }
      },
      copy: {
        dist: {
          files: [{
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>',
            dest: '<%= yeoman.dist %>',
            src: [
              '*.{ico,txt}',
              '.htaccess',
              'ponents/**/*',
              'images/{,*/}*.{gif,webp}',
              'styles/fonts/*'
            ]
          }]
        }
      }
    });

    grunt.renameTask('regarde', 'watch');

    grunt.registerTask('server', [
      'clean:server',
      'coffee:dist',
      'pass:server',
      'livereload-start',
      'connect:livereload',
      'open',
      'watch'
    ]);

    grunt.registerTask('test', [
      'clean:server',
      'coffee',
      'pass',
      'connect:test',
      'karma'
    ]);

    grunt.registerTask('build', [
      'clean:dist',
      // 'jshint',
      // 'test',
      // 'coffee',
      'pass:dist',
      'useminPrepare',
      'imagemin',
      'cssmin',
      'htmlmin',
      'concat',
      'copy',
      // 'cdnify',
      'ngmin',
      'uglify',
      'rev',
      'usemin'
    ]);

    grunt.registerTask('default', ['build']);
  };
Share Improve this question asked May 7, 2013 at 18:07 alvincrespoalvincrespo 9,33413 gold badges48 silver badges62 bronze badges 4
  • What's the error, when you run grunt pass? – Ivan Drinchev Commented May 7, 2013 at 18:26
  • I actually found the issue. It seems that useminPrepare rewrites my concat but incorrectly. This 'dist/styles/main.css': [ 'app/styles/main.css' ] should be ignored but im not sure how to do that :( – alvincrespo Commented May 7, 2013 at 18:34
  • 3 Nevermind this was answered in this github thread: github./yeoman/generator-angular/issues/193 – alvincrespo Commented May 7, 2013 at 19:38
  • thanks alvincrespo! the gruntfile change in the github thread was what I needed. – shicholas Commented May 22, 2013 at 16:44
Add a ment  | 

1 Answer 1

Reset to default 6

The solution of the provided github issue:

I edited the grunt build task and moved 'concat' to before 'imagemin' and now grunt build works properly and main.css is properly generated.

本文标签: javascriptYeomanGrunt not compiling CompassStack Overflow