一:安装

npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题;

常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
nodejs的官网地址:https://nodejs.org/en/
nodejs中文网地址:http://nodejs.cn/
1.从node.js官网下载最新安装包进行安装
2.windows系统下,windows+R调出命令,输入cmd,打开命令工具,检测npm是否安装:输入命令:npm -v
 

3.完成npm安装后,进行安装grunt

输入命令:npm install -g grunt-cli,按下回车键,npm将会从线上自动为我们寻找安装所需要的包

npm install -g grunt-cli命令安装后,全局环境下都可使用
npm install grunt-cli命令,可新建目录,为此目录下安装npm
npm install会报找不到package.json文件,如果后面没有跟任何的提示安装信息,将会找该目录下的package.json,按照里面的dependencies项进行安装,依赖于npm的哪些包和组建
至此,grunt环境安装完成,就可以开始创建项目实践grunt了
 
二、实践
1.创建一个项目grunt

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自动化构建工具学习总结的更多相关文章

  1. grunt自动化构建工具

    一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务, ...

  2. Grunt自动化构建工具(网址:http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)

    简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制 ...

  3. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  4. JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  5. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  6. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

  7. webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  8. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  9. Visual Studio Code初识与自动化构建工具安装

    1.Visual Studio Code如何新建文件夹 要自己手动在本地新建,然后再点击文件->打开文件夹即可. 之后你就可以任意添加文件了 2.如何使用自动化构建工具 通过自动化构建工具,用户 ...

随机推荐

  1. hdu(1007) 最近点对 分治法

    最近点对一般想到枚举  ,一一枚举时间复杂度为n^2:枚举时候一些操作是多余的,有了分治算法的思想 ,把一些问题分个击破,再回到整体. 题目链接 以这道题为例,我们可以把他按照x轴的升序分成多个子区域 ...

  2. [Java]手动编译Java

    1.安装JDK 2.编写 Example.java 程序放到C 盘 public class Example { public static void main(string[] args) { sy ...

  3. python 使用multiprocessing需要注意的问题

    我们在编写程序的时候经常喜欢这样写代码 import MySQLdb import time from multiprocessing import Process conn = MySQLdb.co ...

  4. 【前端】CentOS 7 系列教程之一: 安装 node 最新版

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_1.html 此系列教程从零开始,安装node.mysql.git,nginx.并且设置git自动部署. ...

  5. 转载:SharePoint:扩展DVWP - 第1部分:布局增强 – 在默认值模板和编辑模板中重新排列栏

    SharePoint:扩展DVWP - 第1部分:布局增强 – 在默认值模板和编辑模板中重新排列栏 当我们在数据视图中启用编辑,删除模式的链接时,SPD总是将链接添加到左边. 而我本来希望添加到右侧. ...

  6. UI:动画

    参考 UIView 层级管理.触摸.检测手机是否横屏.调整设备的方向 动画:为了提高用户的体验 View层的动画.UIlayer层的动画.UIView改变视图效果.UIlayer的绘图框架 #prag ...

  7. Struts2中的FilterDispatcher和StrutsPrepareAndExecuteFilter的区别

    1.转自:https://blog.csdn.net/zwx521515/article/details/79300453 在Struts2开发中,很多人问到,声明过滤器的时候,为什么有的时候用&qu ...

  8. 国外、国内各大OJ

    下面是几个比较大的在线提交系统(Online Judge)里面有大量历年的竞赛题目,注册一个ID,然后用自己熟悉的语言(一般有Pascal/C/C++/Java)写好源代码提交即可,会实时返 回信息告 ...

  9. OC静态代码检查实战

    此文已由作者杨晓授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在Mac OS系统上,采用Xcodebuild Analyze命令和OClint工具,对iOS项目进行静态代码 ...

  10. (水题)洛谷 - P1598 - 垂直柱状图

    https://www.luogu.org/problemnew/show/P1598 忘记读取后清空数组,也不知道准确的长度. #include<bits/stdc++.h> using ...