yeoman框架gruntfile.js配置自动jade生成html

说明：本文针对对yeoman框架有一定了解的朋友！

1：安装jade

1.1我们使用node的包管理器npm来安装jade

[size=x-small][b]

   npm install jade -g #-g为全局安装

1.2进入我们yeoman生成目录[/b][/size]

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

安装grunt-contrib-jade插件，为grunt从jade生成html提供支持。
[size=small]

2：配置gruntfile.js文件

[/size]

2.1创建jade任务

找到grunt.initConfig({})代码段，在后面添加
jade: {
  compile: {
    options: {
      client: false,
      pretty: true
    },
    files: [{
      cwd: "<%= yeoman.app %>/views",
      src: "*.jade",
      dest: ".tmp/views",
      expand: true,
      ext: ".html"
    }]
  }
},
说明:cwd表示current work directory 当前工作目录，在yeoman中指的就是你的app文件夹，因为html默认是在views中，所以我加上了views。
src:代表你的源文件目录和类型
dest:代表你想要生成的文件存放位置
如果你不想这么麻烦，不管哪里有jade你都想生成，你只需这样
jade: {
  compile: {
    options: {
      client: false,
      pretty: true
    },
    files: [{
      cwd: "<%= yeoman.app %>",
      src: "*.jade",
      dest: ".tmp",
      expand: true,
      ext: ".html"
    }]
  }
},
2.2修改grunt.registerTask

  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',#在这里添加上jade，修改之前是没有的！
      'concurrent:server',
      'autoprefixer',
      'connect:livereload',
      'watch'
    ]);
  });


  grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'jade',#这里同样需要加上jade，注意，应该放在clean:disk之后
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngmin',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);
2.3在watch中增加监视jade文件变化，实现更新

watch: {
  jade: { 
    files: ['<%= yeoman.app %>/{,*/}*.jade'], 
    tasks: ['jade'] 
    },
    ........
}
注意：这次和2.1不一样，这次是在watch内部，不是和2.1那样和watch同级！
2.4在copy:dist中增加下面这段

   {
      expand: true,
      cwd: '.tmp',
      dest: '<%= yeoman.dist %>',
      src: ['{,*/}*.html']
    },
修改之后应该像这样
copy: {
          dist: {
              .....
                  {
                  expand: true,
                  cwd: '.tmp',
                  dest: '<%= yeoman.dist %>',
                  src: ['{,*/}*.html']
              },
              ............

这样，就能够在使用grunt force或者grunt build的时候自动将jade变成html文件了，同时又能够时候更新！