NPM、nodeJS安装,grunt自动化构建工具学习总结
一:安装
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题;
常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
3.完成npm安装后,进行安装grunt
输入命令:npm install -g grunt-cli,按下回车键,npm将会从线上自动为我们寻找安装所需要的包
2.使用命令:npm init,初始化grunt项目为grunt项目生成package.json
执行完命令后,会在项目根目录下生成package.json文件,文件内容如下图2
3.输入命令:npm install grunt --save-dev,将grunt的最新版本安装到项目的根目录中,并将其添加到package.json的devDependencies内
4.使用命令:npm install <module> --save-dev 安装相应的插件,<module>则是插件的名字,命令执行完后,会在package.json的devDependencies内加入相应插件的版本号
目前我只测试了合并和压缩两个插件:
合并任意文件:grunt-contrib-concat,输入命令:npm install grunt-contrib-concat --save-dev
合并压缩js代码:grunt-contrib-uglify,输入命令:npm install grunt-contrib-uglify --save-dev
可以看到在命令运行结束后,package.json文件的devDependencies内多了这两项
5.在项目的根目录下与package.json同级新建Gruntfile.js文件
此文件由“wrapper”函数、项目与任务配置、加载grunt任务和插件、自定义任务
module.exports = function (grunt) {/*************“wrapper”函数*************/
grunt.initConfig({/**************项目和任务配置**********/
pkg: grunt.file.readJSON('package.json'),//引入package.json文件,并可通过pkg.调用package.json中定义的配置
//合并文件
concat: {
options: {
//定义一个用于插入合并输出文件之间的字符
separator: ';'
},
dist: {
// 将要被合并的文件
src: ['src/js/*.js'],
// 合并后的JS文件的存放位置
dest:'min/js/<%= pkg.name %>.js'
}
},
//压缩文件
uglify: {
options: {
//压缩后的文件生成的注释
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
dist: {
files: {
//将concat合并后的文件进行压缩
'min/js/<%= pkg.name %>.min.js' : ['<%= concat.dist.dest %>']
}
}
}
})
/*****************加载grunt插件和任务******************/
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
/******************自定义任务*******************************/
grunt.registerTask('default',['concat','uglify'])
}
6.在命令行中执行grunt命令,将会进行执行,grunt命令只会执行任务default的任务,其他任务执行需要加上任务名,比如grunt test
先看看执行命令前各文件的状态
在min下面并没有任何文件夹和文件,a.js和b.js中的内容如下图:
执行命令后:
输入命令:grunt
再看看项目的变化:
在min文件夹下生成了一个js文件夹,并在里面生成了grunt_project.js和grunt_project.min.js,grunt_project.js为a.js和b.js合并后的内容结果,grunt_project.min.js为合并后的结果压缩后的内容结果
到这里,简单的grunt构建工具已经完成了,是一个非常大的收获,它还有很多很多的属性,将要学习,加油!!!
最新文章
- C# 解析JSON的几种办法
- Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules
- 也谈谈AlphaGo
- 通过命令行连接Wifi
- BZOJ4445: [Scoi2015]小凸想跑步
- 自定义组件 -- android联系人
- Python科学计算(二)windows下开发环境搭建(当用pip安装出现Unable to find vcvarsall.bat)
- Educational Codeforces Round 7 F - The Sum of the k-th Powers 拉格朗日插值
- 行内元素有哪些?块级元素有哪些?CSS的盒模型?转载
- jquery_mobile事件
- Python in/not in --- if not/if + for...[if]...构建List+ python的else子句
- day31 logging 日志模块
- Haskell语言学习笔记(78)fix
- linux下svn版本控制的常用命令大全
- css样式 float的理解
- jquery插件解读之tabs
- Docker查看映射卷报错
- 使用object_box遇到的崩溃 java.lang.UnsatisfiedLinkError:
- 让MyEclipse支持mac的Retina屏解决字体模糊的问题
- PL/SQL编程—存储过程