Grunt常用插件整理

清理文件和文件夹: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-contrib-clean。 使用UglifyJS压缩js文件:grunt-cont...
    昵称不能太随便阅读 365评论 0 0
  • 清理文件和文件夹:grunt-contrib-clean。 使用UglifyJS压缩js文件:grunt-cont...
    寒梁沐月阅读 382评论 0 3
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 1,088评论 0 8
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,497评论 1 32
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,325评论 0 10