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构建工具已经完成了,是一个非常大的收获,它还有很多很多的属性,将要学习,加油!!!
NPM、nodeJS安装,grunt自动化构建工具学习总结的更多相关文章
- grunt自动化构建工具
一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务, ...
- Grunt自动化构建工具(网址:http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)
简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...
- Visual Studio Code初识与自动化构建工具安装
1.Visual Studio Code如何新建文件夹 要自己手动在本地新建,然后再点击文件->打开文件夹即可. 之后你就可以任意添加文件了 2.如何使用自动化构建工具 通过自动化构建工具,用户 ...
随机推荐
- hdu(1007) 最近点对 分治法
最近点对一般想到枚举 ,一一枚举时间复杂度为n^2:枚举时候一些操作是多余的,有了分治算法的思想 ,把一些问题分个击破,再回到整体. 题目链接 以这道题为例,我们可以把他按照x轴的升序分成多个子区域 ...
- [Java]手动编译Java
1.安装JDK 2.编写 Example.java 程序放到C 盘 public class Example { public static void main(string[] args) { sy ...
- python 使用multiprocessing需要注意的问题
我们在编写程序的时候经常喜欢这样写代码 import MySQLdb import time from multiprocessing import Process conn = MySQLdb.co ...
- 【前端】CentOS 7 系列教程之一: 安装 node 最新版
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_1.html 此系列教程从零开始,安装node.mysql.git,nginx.并且设置git自动部署. ...
- 转载:SharePoint:扩展DVWP - 第1部分:布局增强 – 在默认值模板和编辑模板中重新排列栏
SharePoint:扩展DVWP - 第1部分:布局增强 – 在默认值模板和编辑模板中重新排列栏 当我们在数据视图中启用编辑,删除模式的链接时,SPD总是将链接添加到左边. 而我本来希望添加到右侧. ...
- UI:动画
参考 UIView 层级管理.触摸.检测手机是否横屏.调整设备的方向 动画:为了提高用户的体验 View层的动画.UIlayer层的动画.UIView改变视图效果.UIlayer的绘图框架 #prag ...
- Struts2中的FilterDispatcher和StrutsPrepareAndExecuteFilter的区别
1.转自:https://blog.csdn.net/zwx521515/article/details/79300453 在Struts2开发中,很多人问到,声明过滤器的时候,为什么有的时候用&qu ...
- 国外、国内各大OJ
下面是几个比较大的在线提交系统(Online Judge)里面有大量历年的竞赛题目,注册一个ID,然后用自己熟悉的语言(一般有Pascal/C/C++/Java)写好源代码提交即可,会实时返 回信息告 ...
- OC静态代码检查实战
此文已由作者杨晓授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在Mac OS系统上,采用Xcodebuild Analyze命令和OClint工具,对iOS项目进行静态代码 ...
- (水题)洛谷 - P1598 - 垂直柱状图
https://www.luogu.org/problemnew/show/P1598 忘记读取后清空数组,也不知道准确的长度. #include<bits/stdc++.h> using ...