grunt+less+vuejs 构建多页面框架

最新推荐文章于 2021-06-29 15:54:21 发布

lixue7921

最新推荐文章于 2021-06-29 15:54:21 发布

阅读量1.1k

点赞数 1

分类专栏： html 文章标签： jquery less 框架合并压缩

本文链接：https://blog.csdn.net/lixue7921/article/details/70173170

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

有的页面越简单越好，有的页面需要复杂的逻辑操作怎么办，嗯自己搞了框架上！
使用场景：支持简单的宣传页也支持复杂的活动页
主要功能：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>