Yeoman 之 Jade自动化生成的Grunt实现

对应GitHub版文章地址：Click Me

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

文档

官方网站

使用教程

安装

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

• npm install -g yo

本文假定读者已经了解 Yeoman 的基本功能并且正在使用，并且希望使用 Jade 模版引擎。关于 Jade 的使用语法方面，请参加上一篇文章[Jade —— 简洁的HTML模版引擎]({% post_url 2014-08-03-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/