Grunt 笔记

最新推荐文章于 2022-11-12 01:59:07 发布

meahu

最新推荐文章于 2022-11-12 01:59:07 发布

阅读量200

点赞数

分类专栏：前端工程化

本文链接：https://blog.csdn.net/u014181418/article/details/78640927

版权

前端工程化专栏收录该内容

7 篇文章 0 订阅

订阅专栏

自动化的流式构建工具，比基于文件IO的 Grunt 要快
下面用gulp对代码进行压缩合并。

cnpm install grunt-cli -g // 用于调取本地安装的gulp
cnpm install grunt -g // 全局安装
cnpm init // 初始化项目
cnpm install grunt --save-dev
cnpm install grunt-contrib-uglify --save // 压缩
cnpm install grunt-contrib-concat --save // 合并
cnpm install grunt-contrib-watch --save // 监听文件变化

项目代码：

// index.html
// 引入了打包后的js文件
<script type="text/javascript" src="build/all.min.js"></script>

// src/common.js
console.log('common');

// src/main.js
var main = main || {};
main.sayHello = function(argument){
    console.log('hello');
}
main.sayHello();

// gruntfile.js 配置文件
module.exports = function(grunt){
    // 配置文件
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/* <%=grunt.template.today("yyyy-mm-dd")%>*/\n'
            },
            static_mappings: {
                files: [{
                    src: 'js/common.js', // 源文件
                    dest: 'build/common.min.js' // 目标文件
                },{
                    src: 'js/main.js', // 源文件
                    dest: 'build/main.min.js' // 目标文件
                }]
            },
        },
        // 合并
        concat: {
            bar: {
                src: ['build/*.js'], // 源文件
                dest: 'build/all.min.js' // 目标文件
            },
        },
        watch: {
            files: ['js/common.js'], // 被监听文件
            tasks: ['uglify', 'concat'] // 执行任务
        }
    });

    // 加载任务插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');

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