Was ist der Workflow in Yeoman, um mit Sass-Dateien zu arbeiten?

Question

Ich versuche Yeoman zu benutzen, aber ich weiß nicht, wie ich meine eigenen Sass-Dateien damit verwenden soll.

Mit

grunt server

Sass-Dateien werden beobachtet und kompiliert in

.tmp/styles/

Aber es gibt keinen Hinweis auf die kompilierte Sheet, mit Ausnahme <link rel="stylesheet" href="styles/main.css">

Also, was ist die empfohlene Möglichkeit, die kompilierten Sass-Dateien in ind zu verwenden ex.html während der Entwicklung?

z. grunt server, wenn ich meinen Stil app/styles/my.sass in .tmp/styles/my.css ändere, wird dies überschrieben und es ist außerhalb des Servers (localhost: 9000). Daher ist es unmöglich, sie in index.html zu verknüpfen.

Mit grunt build ist alles in main.cssmy.sass gehören aber während der Entwicklung, die ich weiß nicht, wie meine eigenen sass Dateien in index.html zu verwenden.

Können Sie mir ein einfaches Beispiel geben?

Es ist Standard Yeoman Installation. Ich tat dies:

1. yo angular test
2. ich hinzufügen app/styles/style.sass
3. grunt server diese kompilieren style.sass in .tmp/styles/style.css
4. jetzt weiß ich nicht, wie style.css es in html schließen

(Entschuldigung vielleicht ist das eine blöde frage aber ich bin neu in yeoman und grunze auch)

Dies ist Gruntfile.js von Yeoman:

'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('./component.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'] 
     }, 
     compass: { 
     files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
     tasks: ['compass'] 
     }, 
     livereload: { 
     files: [ 
      '<%= yeoman.app %>/{,*/}*.html', 
      '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', 
      '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', 
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}' 
     ], 
     tasks: ['livereload'] 
     } 
    }, 
    connect: { 
     livereload: { 
     options: { 
      port: 9000, 
      // Change this to '0.0.0.0' to access the server from outside. 
      hostname: 'localhost', 
      middleware: function (connect) { 
      return [ 
       lrSnippet, 
       mountFolder(connect, '.tmp'), 
       mountFolder(connect, yeomanConfig.app) 
      ]; 
      } 
     } 
     }, 
     test: { 
     options: { 
      port: 9000, 
      middleware: function (connect) { 
      return [ 
       mountFolder(connect, '.tmp'), 
       mountFolder(connect, 'test') 
      ]; 
      } 
     } 
     } 
    }, 
    open: { 
     server: { 
     url: 'http://localhost:<%= connect.livereload.options.port %>' 
     } 
    }, 
    clean: { 
     dist: ['.tmp', '<%= yeoman.dist %>/*'], 
     server: '.tmp' 
    }, 
    jshint: { 
     options: { 
     jshintrc: '.jshintrc' 
     }, 
     all: [ 
     'Gruntfile.js', 
     '<%= yeoman.app %>/scripts/{,*/}*.js' 
     ] 
    }, 
    karma: { 
     unit: { 
     configFile: 'karma.conf.js', 
     singleRun: true 
     } 
    }, 
    coffee: { 
     dist: { 
     files: { 
      '.tmp/scripts/coffee.js': '<%= yeoman.app %>/scripts/*.coffee' 
     } 
     }, 
     test: { 
     files: [{ 
      expand: true, 
      cwd: '.tmp/spec', 
      src: '*.coffee', 
      dest: 'test/spec' 
     }] 
     } 
    }, 
    compass: { 
     options: { 
     sassDir: '<%= yeoman.app %>/styles', 
     cssDir: '.tmp/styles', 
     imagesDir: '<%= yeoman.app %>/images', 
     javascriptsDir: '<%= yeoman.app %>/scripts', 
     fontsDir: '<%= yeoman.app %>/styles/fonts', 
     importPath: '<%= yeoman.app %>/components', 
     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.com/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' 
      ], 
     } 
     } 
    }, 
    copy: { 
     dist: { 
     files: [{ 
      expand: true, 
      dot: true, 
      cwd: '<%= yeoman.app %>', 
      dest: '<%= yeoman.dist %>', 
      src: [ 
      '*.{ico,txt}', 
      '.htaccess', 
      'components/**/*', 
      'images/{,*/}*.{gif,webp}' 
      ] 
     }] 
     } 
    } 
    }); 

    grunt.renameTask('regarde', 'watch'); 
    // remove when mincss task is renamed 
    grunt.renameTask('mincss', 'cssmin'); 

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

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

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

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

Answer 1

Was Sie suchen ist dokumentiert auf: https://github.com/yeoman/grunt-usemin

einfach Ihre css Importe in einem Kommentarblock wickeln ähnlich wie die Art und Weise mit den Javascript-Dateien

<!-- build:css styles/main.css --> 
<link rel="stylesheet" href="styles/base.css"> 
<link rel="stylesheet" href="styles/modules.css"> 
<link rel="stylesheet" href="styles/layout.css"> 
<!-- endbuild --> 

sicherstellen, dass Ihr Generator bis getan ist bis heute und deine grunt Aufgaben sind alle eingestellt.Die eine, die Magie zu tun ist 'useminPrepare'

Answer 2

Sie sind es gerade wie

<link rel="stylesheet" href="styles/style.css"> 

Yeoman/Grunzen wissen, wann der Server ausgeführt wird, dass es die sass Datei aus dem temporären Ordner greifen sollten .

Answer 3

Die eigentliche Magie für die Entwicklung ist in geschieht

mountFolder(connect, '.tmp'), 

für die connect-livereload middleware für grunt-contrib-watch.

Dies macht den lokalen Server auch den Inhalt des .tmp Ordner dienen, weshalb Sie styles/main.css und tmp/styles/main.css im Gegenzug verweisen können.

useminPrepare in der Regel wird nie in den Server Task aufgerufen.