美文网首页Javascript
Grunt常用插件整理

Grunt常用插件整理

作者: kylelin | 来源:发表于2014-07-07 10:10 被阅读1986次
清理文件和文件夹:grunt-contrib-clean
module.exports = function(grunt) {
    grunt.initConfig({
        clean : {
            build : ['.tmp', 'build'],
            release : ['release']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.registerTask('default', ['clean']);
};
使用UglifyJS压缩js文件:grunt-contrib-uglify
module.exports = function(grunt) {
    // 项目配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        uglify : {
            options : {
                banner : '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build : {
                src : 'src/<%=pkg.file %>.js',
                dest : 'dest/<%= pkg.file %>.min.js'
            }
        }
    });
    // 加载提供"uglify"任务的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 默认任务
    grunt.registerTask('default', ['uglify']);
};
合并文件: grunt-contrib-concat
module.exports = function(grunt) {
    // 项目配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            options : {
                separator : ';'
            },
            dist : {
                src : ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
                dest : 'dest/libs.js'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 默认任务
    grunt.registerTask('default', ['concat']);
}
合并并压缩文件:

方式一、先合并再压缩,首先将三个文件合并成一个文件libs.js,然后再将文件libs.js压缩成libs.min.js

module.exports = function(grunt) {
    // 项目配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            options : {
                separator : ';'
            },
            dist : {
                src : ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
                dest : 'dest/libs.js'
            }
        },
        uglify : {
            build : {
                src : 'dest/libs.js',
                dest : 'dest/libs.min.js'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 默认任务
    grunt.registerTask('default', ['concat', 'uglify']);
}

方式二:先压缩后合并,其实这里只需要grunt-contrib-uglify一个插件就可以完成代码的压缩及合并。

module.exports = function(grunt) {
    // 项目配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        uglify : {
            "target" : {
                "files" : {
                    'dest/libs.min.js' : ['src/zepto.js', 'src/underscore.js', 'src/backbone.js']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 默认任务
    grunt.registerTask('default', ['uglify']);
}
grunt-contrib-copy:复制文件和文件夹。
grunt-contrib-cssmin:CSS文件压缩。
grunt-contrib-imagemin:图片压缩。
grunt-usemin:Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views).
grunt-contrib-htmlmin:Minify HTML

相关文章

  • Grunt常用插件整理

    清理文件和文件夹:grunt-contrib-clean。 使用UglifyJS压缩js文件:grunt-cont...

  • grunt常用插件

    清理文件和文件夹:grunt-contrib-clean。 使用UglifyJS压缩js文件:grunt-cont...

  • grunt常用插件

    清理文件和文件夹:grunt-contrib-clean。 使用UglifyJS压缩js文件:grunt-cont...

  • 自动化工具

    常用的自动化工具Grunt Gulp FIS Grunt最早,插件生态完善,工作过程基于临时文件实现,构建速...

  • 前端工程化系列[02]-Grunt构建工具的基本使用

    本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况、安装、使用和常见插件的安装、配置和使...

  • 0329-Grunt

    Grunt快速入门 grunt 和grunt插件是通过npm安装管理 安装CLI grunt-cli不等于grun...

  • grunt常用模块

    grunt常用模块 grunt-contrib-clean:删除文件。 grunt-contrib-compass...

  • 自动化构建02

    常用的自动化构建工具 Grunt Gulp FIS Grunt Grunt标记任务失败 Grunt 配置方法 G...

  • Grunt使用记录

    简介 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Grunt...

  • Grunt入门(一)

    Grunt入门(一) 什么是grunt Grunt就和photoshop里面的插件一样,它能够帮我们自动完成一些反...

网友评论

    本文标题:Grunt常用插件整理

    本文链接:https://www.haomeiwen.com/subject/iaijtttx.html