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']); };
相关推荐
主要介绍了详解使用grunt完成requirejs的合并压缩和js文件的版本控制 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
grunt压缩、合并js/css
利用grunt合并、压缩js、css文件,简单罗列步骤,初学者易学
修改requirejs引用的文件 入门 这个插件需要~0.4.5 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-...
熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-requirejs-injector --save-dev 安装插件后,可以使用以下 JavaScript 代码在 Gruntfile 中启用它: grunt . loadNpmTasks ( 'grunt-requirejs-...
前端开源库-grunt-requirejsgrunt require js,使用grunt构建基于require.js的应用程序
grunt-requirejs-paths 在 main.js 中为 requirejs 创建路径对象的辅助多任务入门这个插件需要 Grunt ~0.4.1 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程...
任务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 ...
Grunt TypeScript RequireJS样板jQuery示例中显示的依赖项的使用。 依赖关系由Bower管理。 结果文件将被缩小并与源映射链接。建造安装节点模块: npm install 下载Bower依赖项: bower update 运行Grunt构建过程: ...
此课程讲解grunt 实现对JS和CSS文件内容进行压缩处理。 Grunt 是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查
如何将多个js文件合并压缩为一个js文件为...grunt是如何工作的clean:删除临时文件uglify:压缩qunit:测试concat:合并任务流程可能是这样的:task:cleantask:uglifytask:qunittask:concat安装前提是你已经安装了nodejs和n
#AngularJS 示例项目使用 Grunt / RequireJS 这个项目是一个 Angular-Grunt-RequireJS 样板。 Grunt 用于自动化你的开发管道,包括复制文件/丑化文件/需要模块/单元测试。 RequireJS 是一个很棒的库,它使模块化...
虽然这个入口js都把配置的模块内容都压缩到里面了,但是各个入口合并压缩后的文件中其实都有很多重合的代码,所以考虑到这个就想到把所以的入口文件都统一了,使用一个,到时候用grunt合并压缩也只有这么一个入口...
grunt-handlebars-requirejs 将车把模板编译为 requirejs 模块。
简单的grunt练习, 看看grunt-contact 模块是怎么使用的. 注意要在C:\Users\Administrator\AppData\Roaming\npm目录放一个grunt-cli
混合开发:node grunt混淆压缩 android中的angularjsionic 文件;在做android混合开发,web部分中的文件时用angularjs/ionic 写的;我们经常会用到Directive,Config,Factory,Controller;我在做混淆的时候,先要...
动态创建 main.js 文件以使用 grunt-contrib-requirejs 插件优化基于 RequireJS 的项目。 这是具有许多子组件的基于 RequireJs 的项目。 我想连接/缩小/ecc .. 部署它并提高性能的项目,ecc ... 优化与 grunt-...
grunt-css-injector 这个插件解析 css/scss/sass 文件,找到所有 @import 指令并注入这些文件。入门这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。...