有的页面越简单越好 ，有的页面需要复杂的逻辑操作 怎么办 ，嗯 自己搞了框架上！ 使用场景：支持简单的宣传页 也支持复杂的活动页 主要功能：grunt打包压缩 单页面js合并 less等 项目地址：https://github.com/xuelee/gruntdemo 目录： 环境：nodejs step1：创建项目 名字为demo step2：cd demo 进入项目目录 step3： 创建package.json文件 内容如下：
{ "name": "ydjr", "version": "1.0.0", "dependencies": { "grunt": "^1.0.1", "grunt-cachebuster": "^0.1.7", "grunt-contrib-clean": "^1.0.0", "grunt-contrib-concat": "^1.0.1", "grunt-contrib-copy": "^1.0.0", "grunt-contrib-uglify": "^1.0.1", "grunt-contrib-watch": "^1.0.0", "grunt-contrib-require":"^1.0.0", "grunt-contrib-cssmin": "^1.0.0" }, "devDependencies": { "grunt": "^1.0.1", "grunt-cachebuster": "^0.1.7", "grunt-cli": "^1.2.0", "grunt-contrib-copy": "^1.0.0", "grunt-contrib-less": "^1.3.0", "grunt-rev": "^0.1.0", "grunt-usemin": "^3.1.1" } }step4：运行npm install step5：创建Gruntfile.js //包装函数 module.exports= function (grunt) { var files = grunt.file.expand(‘app/page/*/js/.app’); var concat= {};
files.forEach(function (file) { var filenamelist = file.split('/'); var num = filenamelist.length; var folder = filenamelist[num - 3]; var name = filenamelist[num - 1].replace(/\.app$/,'');; concat['app/page/'+folder+'/js/'+name+'.js'] = grunt.file.read(file).split(','); }); //任务配置，所有插件的配置信息 grunt.initConfig({ //获取package.json的信息 pkg:grunt.file.readJSON('package.json'), //uglify插件的配置信息 uglify:{ publicJs: { options: { beautify: false, stripBanners:true, banner:'/*! <%=pkg.name%>-<%=pkg.vertion%>.js */\n' }, files:[ { expand:true, cwd:'app/', src:'lab/js/*.js', dest:"com/", extDot:"last", ext:".js" } ] }, htmlJs: { options: { beautify: false }, files:[ { expand:true, cwd:'app/', src:'page/**/js/**/*.js', dest:"com/", extDot:"last", ext:".js" } ] }, //合并压缩 release:{ files:concat } }, //cssmin插件信息配置 usemin: { html: ['com/page/**/**/*.html'] }, cssmin:{ options:{ report:'gzip' }, build:{ files:[ { expand:true, cwd:"app", src:['page/**/*.css'], dest:"com", extDot:"last", ext:".css" }, { expand:true, cwd:"src/lab/css", src:['*.css','**/*.css'], dest:"build/lab/css", extDot:"last", ext:".css" } ] } }, //watch插件配置信息 watch:{ build:{ files:[ 'app/page/**/css/*.less', 'app/page/**/css/**/*.less' ], tasks:['less'], options:{ spawn:false } } }, clean:{ dist:['com'] }, concat: concat, //less插件配置 less: { main: { expand: true, cwd:"app/", src: [ 'page/**/css/*.less', 'page/**/css/**/*.less' ], dest: 'app', ext: '.css' }, dev: { options: { compress: true, yuicompress:false } } } , copy: { main: { expand: true, cwd:"app/", src: 'page/**/img/*', dest: 'com/' }, jsMod: { expand: true, cwd: "app/", src: "page/**/mod/*", dest: "com" }, fontFile:{ expand:true, cwd:"app/", src:"page/**/fonts/*", dest:"com" }, htmlFile:{ expand:true, cwd:"app/", src:"page/**/*.html", dest:"com/" }, indexFile:{ expand:true, cwd:"app/", src:"*.html", dest:"com/" }, labFile:{ expand:true, cwd:"app/", src:"lab/css/*", dest:"com" } } , rev: { options: { encoding: 'utf8', algorithm: 'md5', length: 8 }, assets: { files: [{ src: ['com/page/**/css/*.css','com/page/**/css/**/*.css','com/page/**/js/**/*.js','com/page/**/js/*.js','com/lab/css/*.css','com/lab/js/*.js'] }] } } }); //配置requ //grunt加载clean插件 grunt.loadNpmTasks("grunt-contrib-clean"); grunt.loadNpmTasks('grunt-cachebuster'); //grunt加载uplify插件 grunt.loadNpmTasks("grunt-contrib-uglify"); //grunt加载cssmin插件 grunt.loadNpmTasks("grunt-contrib-cssmin"); //grunt加载less插件 grunt.loadNpmTasks("grunt-contrib-less"); //grunt加载copy插件 grunt.loadNpmTasks("grunt-contrib-copy"); //grunt加载watch插件 grunt.loadNpmTasks("grunt-contrib-watch"); grunt.loadNpmTasks('grunt-rev'); grunt.loadNpmTasks('grunt-usemin'); //告诉grunt当我们在终端输入grunt时需要做些什么（注意先后顺序） grunt.registerTask("default",["clean","uglify","less","cssmin","copy","rev","usemin","watch"]); //grunt.registerTask('buster', ['cachebuster']);}step6：创建文件夹名字为app 文件夹内容如下： 其中lab文件夹为根据需要引入的js库及自己写的工具类 在page中创建一个test文件夹 在test创建css img js 文件夹，其中css存放less文件 在test创建test.html 在这里我引用了vuejs 按上面的，目录创建文件 文件内容如下 test.less
@charset "utf-8"; /*-----------------------------------------*****样式重置*****-------------------------------------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend, input,button,textarea,p,blockquote,th,td{margin:0; padding:0;} html,body{ height:100%;font-family: "微软雅黑", Arial, Helvetica, sans-serif;width:1080px;} body{color:#666; font-family:"微软雅黑", Arial, Helvetica, sans-serif;min-width: 1px;width:100%;} a {text-decoration:none; color:#666; -webkit-transition: all .075s ease-in-out; -moz-transition: all .075s ease-in-out; -ms-transition: all .075s ease-in-out; -o-transition: all .075s ease-in-out; transition: all .075s ease-in-out;} a:hover { text-decoration:none;} a:focus{outline:none;-moz-outline:none;} section {border:none; display:block;} a {border:none; } li { list-style:none;} i,em { font-style:normal;} b,h1,h2,h3,h4 { font-weight:normal;} input,select { border:none 0; outline:none;} input::-ms-clear { display:none;} table{border-collapse:collapse; width:100%; table-layout:fixed;} input,select,button{ font-family:"微软雅黑", Arial, Helvetica, sans-serif; font-size:12px;} img{ vertical-align:middle;} * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }_test.app //此文件为配置文件 主要用于配合grunt压缩合并需要引入的js库及工具类等 app/lab/js/vue.min.js,app/page/test/js/test.js test.js
var app=new Vue({ el:'#app', data:{ isLogin:false, timer:0, text:"测试" }, methods: { goPro:function () { this.text="hello vue" } } });test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小测</title> </head> <body> <div id="app"> <button v-on:click="goPro" style="font-size:49px;">点我</button> <p v-text="text"></p> </div> </body> <script src="js/_text.js" type="text/javascript" charset="utf-8"></script> </html>基本页面已经创建完成 在终端执行 grunt 打包项目 此时查看目录 多了一个com文件夹
