`

用grunt合并requireJS的模块文件,压缩css,images

 
阅读更多

 

 

   package.json

  

{
  "name": "grunt-test",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.7.2",
    "jpegtran-bin": "0.2.0",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-less": "~0.9.0",
    "grunt-contrib-cssmin": "~0.7.0",
    "grunt-contrib-htmlmin": "~0.1.3",
    "grunt-contrib-imagemin": "~0.4.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-csscomb": "~2.0.1",
    "requirejs": "~2.1.10"
  }
}

 

 

   Gruntfile.js

/*global module*/
module.exports = function(grunt) {
    grunt.initConfig({
        // 引入模块包
        pkg: grunt.file.readJSON('package.json'),
        // css压缩
        csscomb: {
            options: {
                config: './dev/styles/less/csscomb.json'
            },
            files: {
                expand: true,
                cwd: './dev/styles/',
                src: ['**/*.css'],
                dest: './dev/styles/',
                ext: '.css'
            }
        },
        // require模块合并
        requirejs: {
            build: {
                options: {
                    // app顶级目录,非必选项。如果指定值,baseUrl则会以此为相对路径
                    appDir: './dev',
                    // 模块根目录。默认情况下所有模块资源都相对此目录。
                    // 若该值未指定,模块则相对build文件所在目录。
                    // 若appDir值已指定,模块根目录baseUrl则相对appDir。
                    baseUrl: 'js',
                    // 指定输出目录,若值未指定,则相对 build 文件所在目录
                    dir: './build',
                    // JS 文件优化方式,目前支持以下几种:
                    //   uglify: (默认) 使用 UglifyJS 来压缩代码
                    //   closure: 使用 Google's Closure Compiler 的简单优化模式
                    //   closure.keepLines: 使用 closure,但保持换行
                    //   none: 不压缩代码
                    optimize: "uglify",
                    // 使用 UglifyJS 时的可配置参数
                    // See https://github.com/mishoo/UglifyJS for the possible values.
                    uglify: {
                        toplevel: true,
                        ascii_only: true,
                        beautify: true,
                        max_line_length: 1000
                    },
                    // 是否开启严格模式
                    // 由于很多浏览器不支持 ES5 的严格模式,故此配置默认值为 false
                    useStrict: false,
                    // 处理级联依赖,默认为 false,此时能够在运行时动态 require 级联的模块。为 true 时,级联模块会被一同打包
                    findNestedDependencies: false,
                    /*optimize: 'uglify2',
                    generateSourceMaps: false,
                    preserveLicenseComments: false,*/
                    // useSourceUrl: true,
                    // CSS 优化方式,目前支持以下几种:
                    // none: 不压缩,仅合并
                    // standard: 标准压缩,移除注释、换行,以及可能导致 IE 解析出错的代码
                    // standard.keepLines: 除标准压缩外,保留换行
                    // standard.keepComments: 除标准压缩外,保留注释 (r.js 1.0.8+)
                    // standard.keepComments.keepLines: 除标准压缩外,保留注释和换行 (r.js 1.0.8+)
                    optimizeCss: "standard.keepLines",

                    // 是否忽略 CSS 资源文件中的 @import 指令
                    cssImportIgnore: null,
                    // 设置模块别名
                    // RequireJS 2.0 中可以配置数组,顺序映射,当前面模块资源未成功加载时可顺序加载后续资源
                    paths: {
                        'jquery': 'libs/jquery-1.8.2',
                        'a': 'utils/a',
                        'b': 'utils/b',
                        'c': 'utils/c',
                        'd': 'utils/d',
                        'e': 'utils/e',
                        'de': 'app/de'
                    },
                    // 配置别名及依赖
                    shim: {

                    },
                    // 配置打包模块
                    modules: [{
                        // 模块 alias 名称
                        name: 'de'
                    }],
                    // 输出内容  RequireJS 2.0 中,out 可以是一个函数,也可以指定为一个输出文件地址
                    out: function (text) {
                        // 自定义优化内容
                    }
                }
            }
        },
        imagemin: {
            /* 压缩图片大小 */
            dist: {
                options: {
                    // 压缩级别
                    optimizationLevel: 4
                },
                files: [{
                    expand: true,
                    cwd: './dev/images/',
                    src: ['**/*.{jpg,png,gif}'],
                    dest: './build/images/'
                }]
            }
        }
    });
    grunt.loadNpmTasks('grunt-csscomb'); // css属性指定
    grunt.loadNpmTasks('grunt-contrib-jshint'); //js检查
    grunt.loadNpmTasks('grunt-contrib-imagemin'); //图像压缩
    grunt.loadNpmTasks('grunt-contrib-requirejs'); //requirejs优化


    // 注册任务
    grunt.registerTask('default', ['csscomb', 'requirejs', 'imagemin']);
};

 

 

分享到:
评论

相关推荐

    混合开发:node grunt混淆压缩 android中的angularjsionic 文件

    混合开发:node grunt混淆压缩 android中的angularjsionic 文件;在做android混合开发,web部分中的文件时用angularjs/ionic 写的;我们经常会用到Directive,Config,Factory,Controller;我在做混淆的时候,先要...

    前端开源库-grunt-requirejs

    `grunt`是基于Node.js的一个自动化任务运行器,它允许开发者定义一系列的任务,如合并文件、压缩代码、编译模板等,并能按需运行这些任务。`require.js`则是一个著名的AMD(Asynchronous Module Definition)模块...

    grunt压缩、合并js/css

    grunt压缩、合并js/css

    利用grunt合并压缩文件

    利用grunt合并、压缩js、css文件,简单罗列步骤,初学者易学

    grunt-requirejs-revs:修改requirejs引用的文件

    修改requirejs引用的文件 入门 这个插件需要~0.4.5 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-...

    grunt-contact 模块

    1. **文件合并**:考虑到标签中提到了“只合并 非压缩”,`grunt-contact`可能专注于将多个源文件合并为单个输出文件,但不进行压缩。这在某些情况下很有用,例如在开发过程中,快速查看更改而不必处理压缩后的代码...

    grunt-requirejs-injector:在定义上注入 RequireJS 依赖

    熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-requirejs-injector --save-dev 安装插件后,可以使用以下 JavaScript 代码在 Gruntfile 中启用它: grunt . loadNpmTasks ( 'grunt-requirejs-...

    grunt-requirejs-paths:在 main.js 中为 requirejs 创建路径对象的助手

    grunt-requirejs-paths 在 main.js 中为 requirejs 创建路径对象的辅助多任务入门这个插件需要 Grunt ~0.4.1 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程...

    前端js和css的压缩合并之grunt

    ### 前端JS和CSS的压缩合并之Grunt #### 一、Grunt简介与应用场景 Grunt作为一款强大的自动化构建工具,在前端开发中扮演着重要的角色。它通过一系列可扩展的任务帮助开发者自动化常见的重复性工作流程,比如编译...

    使用grunt合并压缩js和css文件的方法

    任务1:将src目录下的所有zepto及插件合并,并压缩。 --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js ...

    js css文件压缩工具

    在现代Web开发中,为了提高网站的加载速度和性能,对JavaScript(js)和CSS(css)文件进行压缩是至关重要的一步。"js&css压缩工具"是一个专门针对这两种文件类型的压缩工具,它能有效地减小文件大小,从而降低网络...

    grunt-cli模块

    这里定义了一个`less`任务,当运行`grunt`时,它会编译指定的LESS文件并输出CSS。 **命令行选项** Grunt CLI支持一些命令行选项,例如`--force`可以强制执行任务,即使存在错误,`--verbose`则提供详细的执行过程...

    js css文件合并工具

    5. **自动化**:手动合并和压缩文件是低效的,因此开发人员通常会利用构建工具(如Webpack、Gulp、Grunt等)来自动化这个过程。这些工具可以根据配置自动检测文件变化,执行合并和压缩操作,并且能够与其他任务(如...

    grunt-handlebars-requirejs:将车把模板编译为 requirejs 模块

    `grunt-handlebars-requirejs` 是一个用于前端开发的工具,它是 Grunt(一个JavaScript任务运行器)的一个插件,专门处理 Handlebars 模板并将其编译为 RequireJS 可用的模块。这个插件的目标是将 Handlebars 的强大...

    grunt-typescript-requirejs-boilerplate:Grunt TypeScript RequireJS样板

    Grunt TypeScript RequireJS样板jQuery示例中显示的依赖项的使用。 依赖关系由Bower管理。 结果文件将被缩小并与源映射链接。建造安装节点模块: npm install 下载Bower依赖项: bower update 运行Grunt构建过程: ...

    grunt-demo:使用grunt工具压缩合并css 和 js

    如何将多个js文件合并压缩为一个js文件为...grunt是如何工作的clean:删除临时文件uglify:压缩qunit:测试concat:合并任务流程可能是这样的:task:cleantask:uglifytask:qunittask:concat安装前提是你已经安装了nodejs和n

    js、css文件压缩工具

    在Web开发中,使用自动化构建工具如Webpack、Gulp或Grunt能自动化完成JS和CSS的压缩工作。这些工具可以配置任务,将源代码编译、压缩、混淆,并且在每次保存时自动更新,大大提高了开发效率。 总的来说,JS和CSS...

Global site tag (gtag.js) - Google Analytics