再探 butterfly.js - grunt.js篇（一）

最新推荐文章于 2024-06-26 13:49:19 发布

weixin_33726943

最新推荐文章于 2024-06-26 13:49:19 发布

阅读量158

点赞数

原文链接：https://my.oschina.net/u/2287563/blog/378517

版权

2019独角兽企业重金招聘Python工程师标准>>>

##再探 butterfly.js - grunt.js篇（一）

####神器 grunt.js

久仰grunt.js的大名，学习grunt.js一直是我todo List的第一位。趁着新春佳节来临之际（打酱油的日子），就来填了这个坑，完了这个心愿。 grunt.js的强大，强大在于它拥有很多用途丰富的插件，和不同插件之间的联动实现更牛逼的功能。这里默认大家已经安装了npm和会用npm install等指令，就不详细讲了。下面讲用到grunt-contrib-watch和grunt-contrib-connect实现改动代码自动刷新浏览器，而不用手动按F5或者ctrl+R来刷新浏览器。也会将这个酷炫的测试功能应用于butterfly.js的应用开发之中。

grunt-contrib-watch

grunt-contrib-watch，这个插件超级强大，基本上，我见到用grunt.js的应用开发，没有那个不用到grunt-contrib-watch。其功能就是：监测指定文件的改动包括：html、css、js，当指定的文件有改动（保存后），就会触发task。

grunt-contrib-connect

grunt-contrib-connect，文档上面，它给自己的定义就是一个connect web server，所以，这是一个可以创建服务器的插件。

正片

创建我们的工程目录：

myproject
  ┣app
    ┣butterfly
    ┗main
      ┣theme.css
      ┣index.html
      ┗index.js
  ┣package.json
  ┗Gruntfile.js

package.json可以用npm init来创建，或者自己创建文件。这个属于npm基础，不了解的自己面壁。在命令行执行以下代码：

npm install grunt --save-dev
npm install grunt-contrib-connect --save-dev
npm install grunt-contrib-watch --save-dev

上面的--save-dev是两根--的，不知道为什么被吞了一根，这三行代码，分别安装了grunt、grunt-contrib-connect、grunt-contrib-watch。编辑Gruntfile.js，这个文件是Grunt.js的核心，所有Grunt.js执行的任务都在这里控制，Grunt.js的原始状态应该是这样的：

module.exports = function(grunt){
	pkg: grunt.file.readJSON('package.json'),
	grunt.initConfig({
		//...
	});
}

先设置connect模块：

connect: {
	options: {
		port: 9000,
		hostname: 'localhost',
		livereload: 35729
	},
	server: {
		options: {
			open: {target:'http://localhost:9000/main/index.html'},
			base: ['app']
		}
	}
}

再设置watch模块：

watch: {
	livereload: {
		options: {
			livereload: true
		},
		files: ['app/main/index.html','app/main/theme.css', 'app/main/index.js']
	}
}

最后设置task

module.exports = function(grunt){
	pkg: grunt.file.readJSON('package.json'),
	grunt.initConfig({
		connect: {
			options: {
				port: 9000,
				hostname: 'localhost',
				livereload: 35729
			},
			server: {
				options: {
					open: {target:'http://localhost:9000/main/index.html'},
					base: ['app']
				}
			}
		},
		watch: {
			livereload: {
				options: {
					livereload: true
				},
				files: ['app/main/index.html','app/main/theme.css', 'app/main/index.js'] //监测文件列表
			}
		}
	});

	grunt.loadNpmTasks('grunt-contrib-connect');
	grunt.loadNpmTasks('grunt-contrib-watch');

	grunt.registerTask('default', ['connect:server', 'watch'])
}

编辑完成后，在命令行输入grunt，grunt.js通过grunt-contrib-connect创建一个服务器，localhost:9000（域名和端口在options设置），执行命令后，你会发现浏览器自动打开了http://localhost:9000/main/index.html。如果没有报错，就算是大功告成了。这时候你可以改动一下index.html、theme.css或者是index.js。very good。我们解放了F5这个按钮了。