Grunt构建工具的使用

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b56c83be51d45190f4ac68a

文章标签：

#javascript #操作系统 #前端 #ViewUI

使用node写后台服务器的时候，每次修改都需要重启一次，效率非常的低。

使用grunt自动化构建，每次修改文件后会自动重启服务器，同时可对代码进行压缩、编译、单元测试等，减少重复的任务，提高效率。

使用前需要先安装Grunt全局环境

安装全局环境 npm install grunt-cli -g

安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。

安装Grunt npm install grunt --save-dev

目录下新建 Gruntfile.js 文件，必须与package.json同级目录

Gruntfile.js 文件主要包涵四个部分：wrapper函数、项目与任务配置、加载grunt插件和任务、自定义任务

// wrapper函数，所有grunt的代码都需包涵在里面
module.exports = function(grunt) {

    // 项目与任务配置，具体看去官方文档，因为使用的前后端分离没有使用模板文件，因此只监听了JS文件，需要监听其他文件查看官方插件库grunt-contrib-watch的文档
    grunt.initConfig({
        watch: {
            scripts: {
                files: '**/*.js',   // 监听所有的js文件
                tasks: [],
                options: {
                    event: ['all']
                },
            },
        },
        nodemon: {
            dev: {
                script: 'app.js',   // 这里是必须配置的入口文件，其他可选择配置，参考文档
                options: {
                    args: [],
                    ignoredFiles: ['README.md', 'node_modules/**', '.DS_Store'],
                    watchedExtensions: ['js'],
                    watchedFolders: ['app', 'config'],
                    debug: true,
                    delayTime: 1,
                    env: {
                        PORT: '8088' // 监听端口，自行配置
                    },
                    cwd: __dirname
                }
            }
        },
        concurrent: {
            tasks: ['nodemon', 'watch'],
            options: {
                logConcurrentOutput: true
            }
        }
    });
    
    // 加载grunt插件和任务
    // 监听文件变化，重新执行修改的文件
    grunt.loadNpmTasks('grunt-contrib-watch');
    // 监听app.js文件，app.js做出修改，立即重启
    grunt.loadNpmTasks('grunt-nodemon');
    // 针对慢任务开发的插件
    grunt.loadNpmTasks('grunt-concurrent');
    
    // 自定义任务
    grunt.option('froce', true);
    grunt.registerTask('default', ['concurrent']);
	
};
复制代码