yeoman框架下由jade生成htm之gruntfile.js文件配置

来源：互联网发布：js split join 编辑：程序博客网时间：2024/06/04 18:14

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

1：安装jade

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

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

1.2进入我们yeoman生成目录

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

安装grunt-contrib-jade插件，为grunt从jade生成html提供支持。

2：配置gruntfile.js文件

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文件了，同时又能够时候更新！

0 0