这里我们将使用插件——grunt-contrib-uglify。 Gruntfile 现在我们该告诉 GruntJS该做哪些任务了。 接着我们加载了grunt-contrib-uglify插件。在运行grunt命令之前,确保插件已经安装。所有的grunt插件都可以通过npm安装。 如果我们运行grunt命令,我们会碰到下面的信息: >> Local Npm module "grunt-contrib-uglify" not found. Is it installed? 运行下面的命令安装grunt-contrib-uglify插件。 npm install grunt-contrib-uglify --save-dev 然后再次运行grunt命令,这次我们将看到成功的信息。
grunt-contrib-uglify:Minify files with UglifyJS. npm install grunt-contrib-concat --save-dev npm install grunt-contrib-cssmin --save-dev npm install grunt-contrib-uglify grunt-contrib-concat": "^0.5.1", "grunt-contrib-copy": "^0.8.0", "grunt-contrib-cssmin": "^0.12.3", "grunt-contrib-uglify grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify
,根据这些任务需求,需要用到: 合并文件:grunt-contrib-concat 语法检查:grunt-contrib-jshint Scss 编译:grunt-contrib-sass 压缩文件:grunt-contrib-uglify 至于怎么写出来 options 里面的参数和 build 里面的参数内容,这才是 grunt 学习的难点,你需要查看每个插件的用法,根据用法来编写任务,可以看下 grunt-contrib-uglify 插件加载代码 这个就超级简单了,由于上面任务需要用到 grunt-contrib-uglify,当 grunt-contrib-uglify 安装到我们的项目之后,写下下面代码即可加载: grunt.loadNpmTasks ('grunt-contrib-uglify'); 任务注册代码 插件也加载了,任务也布置了,下面我们得注册一下任务,使用 grunt.registerTask('default', ['uglify' grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s).
gruntjs/grunt-contrib-less grunt-contrib-cssmin (CSS文件)压缩 https://github.com/gruntjs/grunt-contrib-cssmin grunt-contrib-uglify (JS文件)压缩 https://github.com/gruntjs/grunt-contrib-uglify grunt-contrib-htmlmin (HTML文件)压缩 https://github.com
}); } var s = firstLetterToUp(' aBCDE Bda erew'); console.log(s); js代码压缩需要一个很常用的插件 grunt-contrib-uglify { "name": "grunt_test", "version": "1.0.0", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-uglify '*.html'], dest: './' } } }); grunt.loadNpmTasks('grunt-contrib-uglify /static/script/test.js'] } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks
gruntjs/grunt-contrib-less grunt-contrib-cssmin (CSS文件)压缩 https://github.com/gruntjs/grunt-contrib-cssmin grunt-contrib-uglify (JS文件)压缩 https://github.com/gruntjs/grunt-contrib-uglify grunt-contrib-htmlmin (HTML文件)压缩 https://github.com
grunt-contrib-jshint": "^1.1.0", "grunt-contrib-less": "^1.4.1", "grunt-contrib-sass": "^1.0.0", "grunt-contrib-uglify ('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify
grunt-contrib-copy": "^1.0.0", "grunt-contrib-cssmin": "^2.2.1", "grunt-contrib-jshint": "^1.1.0", "grunt-contrib-uglify grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-babel'); // 默认被执行的任务列表。
安装grunt-cli npm install -g grunt-cli 切换到工程目录,安装3个nodejs模块 npm install grunt --save-dev npm install grunt-contrib-uglify grunt.loadNpmTasks('grunt-contrib-uglify'); // 加载包含 "htmlmin" 任务的插件。
}, "jest": { "preset": "react-native" } } devDependencies下列出的模块,是我们开发时用的依赖项,像一些进行单元测试之类的包,比如grunt-contrib-uglify
最后,认识一下grunt一些基本的插件:合并文件:grunt-contrib-concat语法检查:grunt-contrib-jshintScss 编译:grunt-contrib-sass压缩文件:grunt-contrib-uglify 调用的是grunt-contrib-uglify插件。首先配置了option:banner的配置项。意思是在文件的顶部加上压缩时间。然后建立了一个子任务:build,名字自己取一个。 grunt.loadNpmTasks('grunt-contrib-uglify');任务注册代码最后一步是注册一个总任务名称,总任务里面包含了任务配置代码中的哪些任务。
可以做很多任务:如脚本验证(grunt-contrib-jshint),脚本,样式压缩(grunt-contrib-uglify),脚本合并(grunt-contrib-concat),编译coffee
grunt-contrib-less": "~0.11.4", "grunt-contrib-watch": "~0.6.1", "grunt-banner": "~0.2.3", "grunt-contrib-uglify grunt-contrib-less": "~0.11.4", "grunt-contrib-watch": "~0.6.1", "grunt-banner": "~0.2.3", "grunt-contrib-uglify
grunt-contrib-clean:一个用来移除文件和目录的任务 grunt-contrib-jshint:一个审查代码质量的任务 grunt-contrib-concat:一个连接多文件在一个文件中的任务 grunt-contrib-uglify grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify
less/b.css' } } npm install grunt-contrib-concat --save-dev //安装合并插件 npm install grunt-contrib-uglify
ok npm install grunt-contrib-copy npm install grunt-contrib-concat npm install grunt-contrib-uglify
"grunt-contrib-uglify" : "0.2.0" }, "author" : "Altaf Hussain", "license" : "" } 代码中添加了一些注释方便大家理解 } } //uglify结束 }); //initConfig结束 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify
0.4.1", "grunt-cmd-transport": "~0.2.0", "grunt-cmd-concat": "~0.2.0", "grunt-contrib-uglify grunt.loadNpmTasks('grunt-cmd-transport'); grunt.loadNpmTasks('grunt-cmd-concat'); grunt.loadNpmTasks('grunt-contrib-uglify
Scripts 构建项目 参考链接,这里摘抄几点: Gulp 与 Grunt 的不足 总得来说就是 Gulp 与 Grunt 引入了一层复杂但是多余的抽象层,用来抽象直接的构建命令,比如gulp-uglify和grunt-contrib-uglify
写到压缩代码的最后一行 -- in -source - map 输入Source Map, 当源文件已经经过变换时使用 3.2 Grunt Grunt 是 JavaScript 项目构建工具 配置 grunt-contrib-uglify sourceMap: true } } }); 使用 grunt-usemin 打包源码时, grunt-usemin 会依次调用grunt-contrib-concat[9]与grunt-contrib-uglify