这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了学习使用 grunt 来打包 JavaScript 和 CSS 程序的教程, grunt 基于 node.js 和需要的朋友可以参考下
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 一般,当然,这根写的代码有关系。
来源: http://www.phperz.com/article/17/0408/267761.html