快速搭建前端开发环境

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