【GruntMate】Nodejs下基于node-webkit的Grunt可视化项目管理工具

【GruntMate】Nodejs下基于node-webkit的Grunt可视化项目管理工具

###GruntMate有哪些功能？

  • 方便的管理基于Grunt的项目
  • 方便统一管理Grunt插件
  • 提供可视化启动、停止Grunt项目
  • 监听Gruntfile.js文件变化，自动重启Grunt任务
  • 方便搜索grunt运行日志
  • uglifyjs的压缩/美化
  • 图片转base64
  • 雪碧图合并功能

###https://github.com/floydcash/gruntmate，欢迎大家X一下

gruntmate_shot


2 回复

【GruntMate】Nodejs下基于node-webkit的Grunt可视化项目管理工具

GruntMate有哪些功能？

GruntMate 是一个基于 Node.js 和 node-webkit 的 Grunt 可视化项目管理工具。它提供了以下功能：

  1. 方便的管理基于Grunt的项目

    • 使用 GruntMate，你可以通过图形界面轻松管理和配置你的 Grunt 项目。

  2. 方便统一管理Grunt插件

    • 可以通过 GruntMate 界面来安装、卸载和更新 Grunt 插件，无需手动编辑 package.json 文件。

  3. 提供可视化启动、停止Grunt项目

    • 通过点击按钮即可启动或停止 Grunt 任务，无需命令行操作。

  4. 监听Gruntfile.js文件变化，自动重启Grunt任务

    • 当你修改了 Gruntfile.js 文件时，GruntMate 会自动检测到变化，并重新加载配置以执行新的任务。

  5. 方便搜索grunt运行日志

    • 提供日志搜索功能，帮助你快速定位问题。

  6. uglifyjs的压缩/美化

    • 支持对 JavaScript 文件进行压缩和美化处理。

  7. 图片转base64

    • 将小图片转换为 base64 编码，便于内嵌到 CSS 或 HTML 中。

  8. 雪碧图合并功能

    • 自动将多个小图标合并成一张雪碧图，并生成相应的 CSS 类。

示例代码

// 安装 GruntMate
npm install -g gruntmate

// 启动 GruntMate
gruntmate

// 在 Gruntfile.js 中添加任务配置
module.exports = function(grunt) {
    // 加载必要的 Grunt 任务
    require('load-grunt-tasks')(grunt);

    // 配置任务
    grunt.initConfig({
        uglify: {
            options: {
                mangle: false
            },
            my_target: {
                files: {
                    'dist/app.min.js': ['src/app.js']
                }
            }
        },
        cssmin: {
            target: {
                files: [{
                    expand: true,
                    cwd: 'src',
                    src: ['*.css', '!*.min.css'],
                    dest: 'dist',
                    ext: '.min.css'
                }]
            }
        }
    });

    // 注册默认任务
    grunt.registerTask('default', ['uglify', 'cssmin']);
};

GitHub链接

你可以在 GitHub 上找到更多关于 GruntMate 的信息和文档。

gruntmate_shot

希望这些信息对你有所帮助！如果你有任何疑问或需要进一步的帮助，请随时联系我。


【GruntMate】Nodejs下基于node-webkit的Grunt可视化项目管理工具

功能简介

GruntMate 是一个基于 Node.js 和 node-webkit 的可视化工具，旨在简化基于 Grunt 的项目管理。以下是其主要功能：

  1. 方便地管理基于Grunt的项目：用户可以轻松配置和启动 Grunt 任务。
  2. 方便统一管理Grunt插件：用户可以通过界面来安装、更新和卸载 Grunt 插件。
  3. 提供可视化启动、停止Grunt项目：用户可以直接通过图形界面启动或停止 Grunt 任务。
  4. 监听Gruntfile.js文件变化，自动重启Grunt任务：当 Gruntfile.js 文件发生变化时，GruntMate 会自动重新加载任务。
  5. 方便搜索grunt运行日志：用户可以通过界面搜索和查看 Grunt 运行时的日志信息。
  6. uglifyjs的压缩/美化：支持对 JavaScript 文件进行压缩和美化处理。
  7. 图片转base64：可以将图片转换为 base64 编码，便于内嵌到 CSS 或 HTML 中。
  8. 雪碧图合并功能：支持将多张小图片合并成一张大图，并生成相应的 CSS。

使用方法

GruntMate 的使用非常简单，只需下载并安装 node-webkit 环境，然后从 GitHub 下载 GruntMate 项目。确保已经安装了 Node.js 并且全局安装了 Grunt CLI (npm install -g grunt-cli)。

示例代码

以下是一个简单的示例，展示如何在 Gruntfile.js 中配置基本的 Grunt 任务：

module.exports = function(grunt) {
    // 加载必要的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // 配置任务
    grunt.initConfig({
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'build/styles.min.css': ['styles/*.css']
                }
            }
        }
    });

    // 默认任务
    grunt.registerTask('default', ['uglify', 'cssmin']);
};

上述代码展示了如何配置两个基本任务：uglify 和 cssmin，用于压缩 JavaScript 和 CSS 文件。

结论

GruntMate 提供了一个友好的界面来管理和配置基于 Grunt 的项目。你可以通过简单的界面操作完成复杂的任务配置，从而提高工作效率。

更多详情和最新版本可以在 GitHub 上查看。

回到顶部