美文网首页
grunt常用插件

grunt常用插件

作者: 昵称不能太随便 | 来源:发表于2016-08-10 15:21 被阅读0次

清理文件和文件夹: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-jshint
jshint用于javascript代码检查(并会给出建议),发布js代码前执行jshint任务,可以避免出现一些低级语法问题。
jshint拥有非常丰富的配置,可以自由控制检验的级别。

module.exports = function(grunt) {

    // 构建任务配置
    grunt.initConfig({
        //读取package.json的内容,形成个json数据
        pkg: grunt.file.readJSON('package.json'),
        jshint: {
            options: {
                //大括号包裹
                curly: true,
                //对于简单类型,使用===和!==,而不是==和!=
                eqeqeq: true,
                //对于首字母大写的函数(声明的类),强制使用new
                newcap: true,
                //禁用arguments.caller和arguments.callee
                noarg: true,
                //对于属性使用aaa.bbb而不是aaa['bbb']
                sub: true,
                //查找所有未定义变量
                undef: true,
                //查找类似与if(a = 0)这样的代码
                boss: true,
                //指定运行环境为node.js
                node: true
            },
            //具体任务配置
            files: {
                src: ['src/*.js']
            }
        }
    });

    // 加载指定插件任务
    grunt.loadNpmTasks('grunt-contrib-jshint');

    // 默认执行的任务
    grunt.registerTask('default', ['jshint']);
};

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 Gulp FIS Grunt最早,插件生态完善,工作过程基于临时文件实现,构建速...

  • Grunt常用插件整理

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

  • 前端工程化系列[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/seljsttx.html