Yeoman 中处理 Sass 文件的工作流程是啥？

Posted 2023-03-07

【中文标题】Yeoman 中处理 Sass 文件的工作流程是啥？

【英文标题】：What is workflow in Yeoman to work with Sass files?Yeoman 中处理 Sass 文件的工作流程是什么？

【发布时间】：2013-03-15 02:08:26

【问题描述】：

我尝试使用 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 的新手，也很咕哝）

这是来自 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 %>/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']);
;

【问题讨论】：

我可以看看你的 gruntfile 吗？

它应该在您的问题中；-) 答案仅适用于原始问题的答案，而不是 cmets。

对不起，我添加的有问题。

【参考方案1】：

真正的发展魔法发生在

mountFolder(connect, '.tmp'),

对于connect-livereload middleware 对于grunt-contrib-watch。

这使得本地服务器也提供 .tmp 文件夹的内容，这就是为什么你可以引用 styles/main.css 并获取 .tmp /styles/main.css 作为回报。

useminPrepare 通常不会在 server 任务中调用。

【讨论】：

不错！我从您的回答中了解了繁重的工作流程。 ``` livereload: options: open: true, base: [ '.tmp', '' ] , ```

【参考方案2】：

您要查找的内容记录在：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'

【讨论】：

我不明白为什么——useminPrepare 通常不会在 server 任务中调用。在生产中（构建任务）是的，理解这一点很重要。

【参考方案3】：

您只需像这样包含它

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

Yeoman/grunt 在运行服务器时会知道它应该从 temp 文件夹中获取 sass 文件。

【讨论】：

默认情况下不是。但是你可以添加一个像grunt-text-replace 这样的grunt-task，它可以用来在文本文件中搜索/替换。但是为什么在开发期间你希望在你的 index.html 中包含不同的 sass 文件呢？

我不想要它。但在 yeoman 默认 grunt build 中，将所有 *css 和 *.sass 文件从 app/style 合并到 dist/styles/main.css 中，所以在 grunt build 之后，除了 main.css 之外，其他 css 和 sass 文件都是不必要的。也许我不明白 yeoman 构建过程的意图是什么，因为如果 grunt-text-replace 是必要的，恕我直言，yeoman 制造商在 grunt build 期间使用它。所以这是我上面的问题，换句话说：因为 yeoman 打算使用我自己的 css,sass 文件？