内容简介:学习使用grunt来打包JavaScript和CSS程序的教程
Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理。在JavaScript的世界里,随着Node.js的流行,JavaScript原生的构建 工具 已经成为可能。
Grunt.js是基于Node.js的自动化任务运行器。Grunt.js结合NPM的包依赖管理,完全可以媲美Maven。Grunt.js天然适合前端应用程序的构建——不仅限于JavaScript项目,同样可以用于其他语言的应用程序构建。越来越多的JavaScript项目已经在使用Grunt,其中最大的使用者包括著名的jQuery项目。
Grunt的生态系统在迅速的成长,目前已经有上百种插件发布在NPM上可供选择。同时,任何人都可以方便的发布自己的插件到NPM上供其他人使用。
Grunt没有像Maven那样强调构建的生命周期,各种任务的执行顺序可以随意配置。Grunt本身仅是一个执行器,大量的功能都存在于NPM管理的插件中。特别是以grunt-contrib-开头的核心插件,覆盖了大部分的核心功能,比如handlebars,jade,less,compass,jshint,jasmine,clean,concat,minify,copy,uglify,watch,minify,uglify等。
通过提供通用的接口以进行代码规范检验(Lint)、合并、压缩、测试及版本控制等任务,Grunt使入门门槛大大降低了。
一,安装nodejs,grunt,以及grunt插件
1,安装nodejs
下载地址:https://nodejs.org/download/ 2,安装grunt,以及插件
npm install grunt -g //安装grunt,-g全局变量 npm install grunt-cli -g //安装grunt命令行 npm install grunt --save-dev //安装grunt,--save-dev保存到安装目录 npm install grunt-cli --save-dev //安装grunt命令行 npm install grunt-contrib-jshint --save-dev //js语法检测插件 npm install grunt-contrib-concat --save-dev //js合并插件 npm install grunt-contrib-uglify --save-dev //js压缩插件 npm install grunt-contrib-cssmin --save-dev //CSS压缩插件
grunt和grunt-cli,-g和--save-dev都安装一下,建议这样,省得出错。
3,创建工作目录
当上面的安装都结束后,node_modules里面就包含了上面安装的插件,将nodejs安装目录中的node_modules,copy到新的目录中,并创建Gruntfile.js,package.json,在这里要注意一点,Gruntfile.js,package.json一定要与这个node_modules同一目录下,不然在调用grunt插件的时候会报错的,例如:
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed? Warning: Task "uglify" not found. Use --force to continue.
如果你没有装grunt-contrib-uglify插件,也会报这个错误。
二,创建Gruntfile.js和package.json
1,package.json
{ "name": "jstest", "file": "function", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.11.3", //后面的数字是版本号,从各个插件目录下的package.json能找到 "grunt-contrib-concat": "~0.5.1", "grunt-contrib-uglify": "~0.9.2", "grunt-contrib-cssmin": "~0.14.0" } }
2,Gruntfile.js
module.exports = function (grunt) { // grunt配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['js_s/function.js', 'js_s/jquery.validate.js'], dest: 'js_d/main.js' //合并不压缩 } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' //文件顶部的注释,可自定义 }, build: { //将package.json中的file对应的文件,进行压缩并重命名 src: 'js_s/<%= pkg.file %>.js', //注意空格,官方配置例子是pkg.name dest: 'js_d/<%= pkg.file %>.min.js' //注意空格,官方配置例子是pkg.name }, buildall: {//将js_s文件夹下的所有js文件,压缩后,放到js_d文件夹中,文件名不变 files: [{ expand:true, cwd:'js_s',//js目录下 src:'**/*.js',//所有js文件 dest: 'js_d'//输出到此目录下 }] }, hebin: {//将function.js和jquery.validate.js,合并,并压缩成main.min.js files: { 'js_d/main.min.js': ['js_s/function.js', 'js_s/jquery.validate.js'] } }, ymain: {//将main.js压缩成main1.min.js src: 'js_d/main.js', dest: 'js_d/main1.min.js' } }, jshint: { //检查,function.js是不是有语法错误 all: ['js_s/function.js'] }, cssmin: { combine: { files: { //将css_s文件夹下的css文件合成一个 'css_d/main.css': ['css_s/*.css'] } }, minify: { options: { keepSpecialComments: 0, /* 删除所有注释 */ banner: '/* minified css file */' }, files: { //单个CSS文件压缩 'css_d/index.min.css': ['css_s/index.css'] } }, test: {//按文件夹下的所有CSS文件,压缩后,放到新的文件夹中,文件名不变 files: [{ expand:true, cwd:'css_s',//css目录下 src:'**/*.css',//所有css文件 dest: 'css_d'//输出到此目录下 }] } } }); // 加载插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-cssmin'); // 是否调用插件功能 //grunt.registerTask('default', ['concat','uglify','jshint','cssmin']); // grunt.registerTask('default', ['uglify']); // grunt.registerTask('default', ['concat']); //grunt.registerTask('default', ['jshint']); grunt.registerTask('default', ['cssmin']); //CSSMIN插件的功能能用,其他功能都不起作用 }
配置文件好了以后,在命令行下,输入grunt就可以合并压缩了。上面的测试文件,基本上都是围绕着,合并与压缩来的,对于做WEB前端的来说,这个还是比较重要的。
从压缩效果来说,JS的压缩效果比较理想,CSS一般,当然,这根写的代码有关系。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 小程序打包插件开发体验
- Android应用程序资源的编译和打包过
- 来~打包实现小程序动态分享图一条龙服务( ¨̮ )
- 小程序:基于Vue的多端开发框架uni-app 小程序打包App
- 学习使用grunt来打包JavaScript和CSS程序的教程
- 打包.NET Core的程序到一个单独的可执行文件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
An Introduction to Probability Theory and Its Applications
William Feller / Wiley / 1991-1-1 / USD 120.00
Major changes in this edition include the substitution of probabilistic arguments for combinatorial artifices, and the addition of new sections on branching processes, Markov chains, and the De Moivre......一起来看看 《An Introduction to Probability Theory and Its Applications》 这本书的介绍吧!