Yeoman 之 Jade自动化生成的Grunt实现-CSDN博客

对应GitHub版文章地址：Click Me

Yeoman 是一项能够辅助 Web 开发的生态系统，可以将开发高效地流程化，极大的减少人力成本，尤其是在 Angular.JS 的开发中。

Yeoman LOGO

文档

官方网站

使用教程

安装

在Node中安装Jade的方法如下：

npm install -g yo

本文假定读者已经了解 Yeoman 的基本功能并且正在使用，并且希望使用 Jade 模版引擎。关于 Jade 的使用语法方面，请参加上一篇文章Jade —— 简洁的HTML模版引擎

本文中假定读者已经具有一个 Yeoman 项目了，对于如何使用 Yeoman 建立项目不再详述。

使用详解

相信大家都已经看过 Jade 的官方文档了，但是很不幸，官方的使用方法是针对 Node.js 的，并没有说明如何在 Yeoman 中使用，也就是使用 Grunt 作为服务器的相关配置。

1. 程序包安装

对于 Yeoman 项目，我们要安装的并不是官方的 Jade.js ，而是一个 Grunt 插件：grunt-contrib-jade。

打开控制台，进入到当前项目文件夹，输入：

npm install grunt-contrib-jade --save-dev 或 npm install grunt-contrib-jade -D

其中，--save-dev 的作用是同时将程序包信息添加到 package.json 的 devDependencies 清单中。

2. 在 Gruntfile.js 中添加 jade 命令

打开项目中的 Gruntfile.js 文件，在 grunt.initConfig({ }); 中添加如下代码：

jade: {
  compile: {
    options: {
      client: false,
      pretty: true
    },
    files: [{
      cwd: "<%= yeoman.app %>/views",
      src: "*.jade",
      dest: ".tmp/views",
      expand: true,
      ext: ".html"
    }]
  }
},

其中要保证 jade: { 在 grunt.initConfig({ 的下一级缩进上，与其他命令的先后顺序可以任意，最好不要放在 watch 的前面。

上面的命令中 cwd 指的是 current work directory，相当于 URL 中 host 的作用。 cwd 和 src 的组合就是 .jade 文件的实际路径。在本例中，只处理 app/views/ 下的所有 .jade 文件。

如果不止在 views 文件夹中，而是在整个 app 文件夹下都有 .jade 文件（如含有index.jade），就应该写成：

jade: {
  compile: {
    options: {
      client: false,
      pretty: true
    },
    files: [{
      cwd: "<%= yeoman.app %>",
      src: "{,*/}*.jade",
      dest: ".tmp",
      expand: true,
      ext: ".html"
    }]
  }
},

其中 {,*/} 表示任意级子目录，这样对于 app 目录下及更下的任何 .jade 都能被处理。

另外需要注意的是，生成的 .html 文件和原有的 .jade 文件是一一对应的，除后缀名外的文件名保持不变。.html 文件对于 dest 的相对路径就等于 .jade 模版对于 cwd 的相对路径，因此后面一种形式更方便理解。（即原来 .jade 模版在 app 文件夹中放哪生成的 .html 页面就在 .tmp 文件夹中放哪，具体路径规则还要看自己的路由配置，多试试也就明白了噻~）

3. 在 serve 和 build 任务中添加 jade 命令

在 Gruntfile.js 中找到 serve 和 build 任务（默认应该在最底部位置），在命令序列中加入 jade 如下：

grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
  if (target === 'dist') {
    return grunt.task.run(['build', 'connect:dist:keepalive']);
  }

  grunt.task.run([
    'clean:server',
    'wiredep',
    'jade',
    'concurrent:server',
    'connect:livereload',
    'watch'
  ]);
});

不同版本可能略有差异，特别注意， jade 命令必需在 clean:server 之后，不然你刚生成就被自动清理掉了。

build 任务的部分也十分相似：

grunt.registerTask('build', [
  'clean:dist',
  'jade',
  'wiredep',
  'useminPrepare',
  'concurrent:dist',
  'concat',
  'ngmin',
  'copy:dist',
  'cdnify',
  'cssmin',
  'uglify',
  'filerev',
  'usemin',
  'htmlmin'
]);

这里除了必须在 'clean:dist' 之后以外，还必需要在 'useminPrepare' 之前，当然，后面还需要改动一些其他的命令。

4. 在 watch 命令中增加配置命令

在 watch 中进行配置的作用在于自动监视更改，即可以实现在 .jade 模版发生变更后实时更新对应生成的 .html ，不是必须，但胜似必需，除非自己愿意每修改一次文件就要重新用一次 grunt serve 。

在 grunt.initConfig({ }) 中找到 watch: { } ，与上一部分中的 jade: {} 是同级缩进。接着在 watch: { } 中，再添加一个小小的 jade: {} 命令。看起来有点凌乱，不过此 jade 非彼 jade ，具体代码如下：

watch: {
  jade: {  
    files: ['<%= yeoman.app %>/{,*/}*.jade'],  
    tasks: ['jade']  
    }, 
  //很多其他指令
}

这里的路径规则和上面是一样的，添加了这段代码后，就会在任何一个 .jade 文件更改的时候执行第2步中的 jade 命令了。

也并非一定要放在 watch 中的第一个，但把自定义的内容放在醒目位置方便修改还是比较好的。

5. 修正其他命令中的 html 路径

如果现在执行就已经可以正常运行网站了，但如果执行 grunt build ，就会发现 dist 文件夹中找不到生成的 html 文件，为此，我们需要进行一些其他的调整。

找到如下的命令，没有改动前的版本应该如下所示：

useminPrepare：

useminPrepare: {
  html: '<%= yeoman.app %>/index.html',
  options: {
    dest: '<%= yeoman.dist %>',
    flow: {
      html: {
        steps: {
          js: ['concat', 'uglifyjs'],
          css: ['cssmin']
        },
        post: {}
      }
    }
  }
},

将 html: '<%= yeoman.app %>/index.html', 改为 html: '.tmp/index.html' 即可。（如果用了 index.jade 来生成 index.html 的话才要用，不要有木有都滥用啊。）

另外，找到 copy:dist 命令如下：

copy:dist：

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        '*.html',
        'views/{,*/}*.html',
        'images/{,*/}*.{webp}',
        'fonts/*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},

将其改为（增加一个小节）：

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        '*.html',
        'views/{,*/}*.html',
        'images/{,*/}*.{webp}',
        'fonts/*'
      ]
    }, {
      expand: true,
      cwd: '.tmp',
      dest: '<%= yeoman.dist %>',
      src: ['{,*/}*.html']
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: ['generated/*']
    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},

之后就能够正常的 grunt build 了。

另外，也有的教程中直接修改了 htmlmin 从而直接从 .tmp 文件夹中生成到 dist 文件夹，更加快捷。读者可以根据需要自行选择。

本站地址： http://trotyl.github.io/

转载于:https://www.cnblogs.com/trotyl/p/3890582.html