进了新的公司,需要重构一个项目,从头开始。本人患懒癌已久,一直没有写博客的打算,也是因为资质还比较浅,写不出什么富有涵养的内容,后来想了想,就当自己的笔记吧。这次从新开始,未尝不是一个博客开始的好时机,所以,慢慢来吧。。
项目最开始,还是从搭建新的开发环境开始吧,叫什么来着,要想砍树,必先磨刀!grunt工具是我最先接触到的前端打包工具,包括less编译,js文件压缩,css文件压缩等功能。所以还是先把这个工具研究透一点。。
1、首先,grunt有官方网站:http://www.gruntjs.net/
借用官网的一句话:grunt是通过npm来管理的,npm是node.js的管理工具。所以首先你需要安装node的环境,node官网:https://nodejs.org/en/,node最好是安装在全局的环境中。
接着,在你安装好npm后,在你的项目文件下,打开cmd命令行,输入npm install -g grunt-cli
是的,运行完了,然而文件夹里并没有什么变化,这个时候缺一个文件,package.json文件,看看我的package.json文件怎么配置的咯
{
"name": "demo",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1",
"grunt-contrib-concat":"~0.1.1",
"grunt-css": ">0.0.0",
"grunt-contrib-less": "*",
"grunt-contrib-cssmin": "*",
"grunt-contrib-watch": "*"
},
"dependencies": {
"express": "3.x"
}
}
2、可以直接手动新建一个packege.json文件,将上面的配置代码复制到新建的文件中。
packge.json文件建好后,在cmd命令行中运行: npm install
是的,命令运行后,文件目录中新增了node_modules文件夹,里面是你配置的packge.json文件里需要加载的文件。
3、好的,现在grunt配置文件搭好了,工具备好了,还差一个策划方案了,也就是grunt任务,里面配置你真正的执行任务,Gruntfile.js文件。一样,先看看我的gruntfile里有什么任务吧。
module.exports = function (grunt) {
// 项目配置
var config = {
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'src/a.js',
dest: 'dest/min/a.min.js'
}
},
copy: {
main: {
files: [{
src: 'src/a.js',
dest: 'dest/js/a.js'
},{
src: 'dest/min/a.min.js',
dest: 'dest/js/a.min.js'
}]
}
}
};
grunt.initConfig(config);
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
// 默认任务
grunt.registerTask('build', ['uglify','copy:main']);
}
4、如上述代码,我所要做的是一个压缩和拷贝的两个任务,那么看看我们的结果吧。cmd命令运行:grunt build
哒哒,运行成功,看下我们的文件夹出现了什么变化呢?
解释一下我的任务做了什么哈:
1、uglify:将我建在src文件下的a.js文件,压缩到到min目录下,a.min.js文件
2、copy: 将src下的原a.js文件 和 min目录下的a.min.js文件拷贝到dest目录里
从我的截图可以看出,文件大小变了哦,好了,grunt任务执行结束。