安静
PHP技术博客

160725 grunt helloworld

为何要用构建工具?

一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

为什么要使用Grunt?

Grunt生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用Grunt自动完成任何事,并且花费最少的代价。如果找不到你所需要的插件,那就自己动手创造一个Grunt插件,然后将其发布到npm上吧。先看看入门文档吧。

下面是安装使用过程

终端安装cli

npm install -g grunt-cli

构建项目目录

npm init

会生成一个package.json

{
"name": "cc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

安装所需的 moudle

 npm install --save-dev grunt grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

安装完模块后 package.json文件会被更改

{
"name": "cc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^1.0.0"
}
}

创建grunt配置文件 Gruntfile.js

module.exports = function(grunt){
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/*.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['uglify']);
}

当前目录创建src

添加a.js

function hello(){
console.log('hello');
}

添加b.js

function world(){
console.log('world');
}

构建 grunt

gunt
Running "uglify:build" (uglify) task
>> 1 file created.
Done.

查看build目录cc.min.js

/*! cc 2016-07-25 */
function hello(){console.log("hello")}function world(){console.log("world")}

具体demo下载地址

http://pan.baidu.com/s/1boIuvP9

更多查看

http://www.gruntjs.net/getting-started
赞(0) 打赏
未经允许不得转载:AJ's Blog » 160725 grunt helloworld
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    不错的构建工具grunt使用教程!

    PHP程序员雷雪松1年前 (2016-12-28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏