前端切页面 架构配置 node npm grunt grunt合并HTML必看

快速搭建前端开发环境

1.npm包依赖

{
  "name": "demo",
  "version": "1.0.0",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-html-build": "^0.5.3"
  },
  "license": "ISC"
}

2.grunt 配置

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        fixturesPath: "html",
        htmlbuild: {
            index: {
                src: './html/src/*.html',
                dest: './html/',
                options: {
                    beautify: true,
                    sections: {
                        layout: {
                            header: '<%= fixturesPath %>/layout/header.html',
                            footer: '<%= fixturesPath %>/layout/footer.html',
                            left: '<%= fixturesPath %>/layout/left.html'
                        }
                    },
                    data: {
                        // Data to pass to templates
                        version: "0.1.0",
                        title: "test",
                    }
                }
            }
        },
        watch: {
            js: {
                files: ['html/**/*.html'],
                tasks: ['htmlbuild']
            }
        }
    });
    // 加载包含 "uglify" 任务的插件。

    grunt.loadNpmTasks('grunt-html-build');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 默认被执行的任务列表。
    grunt.registerTask('default', ['htmlbuild', 'watch']);

};

3.官方参考文章

https://github.com/spatools/grunt-html-build