您的位置: 首页  >  文章  >  grunt + bower

grunt + bower

分类: 文章 • 2023-12-06 13:47:16

Grunt+Bower的简单应用

前言

     首先要感谢那些知名的不知名的前辈们，你们的成就是我们进步的基础。

    本文针对的读者是那些像之前的我一样刚刚了解Grunt和Bower这两个名字是什么，但还不知道究竟是干什么的，同样是以应用为主，已经会基本使用这些的就不需要看了，因为都是最基础的一些东西，同样如果您看了之后发现有什么不符合逻辑或常识的问题，或是有什么错误，我会非常期待您的指正。

1.安装nodeJS

    grunt以及其插件都是需要依赖nodejs来运行的，所以如果你的电脑中并没有安装，那么需要安装nodejs，安装过程极其简单，就是傻瓜式的下一步直到install即可

    nodejs官网：https://nodejs.org/en/

grunt + bower

这是官网打开以后的图，我们这里安装左边的就可以了。

安装完成以后，win+r cmd  打开命令提示符窗口，输入node -v查看版本号，以验证nodejs是否安装成功

grunt + bower



2.安装grunt-CLI

这里就与传统的安装软件方式不同了，以后安装的一些插件基本都是使用这样的方式安装的，所以先不用问这是什么东西，用的时间长了就明白是个什么东西了

首先使用nodejs的npm install方式安装grunt-CLI ，很简单，就是在命令行里输入npm install -g grunt-cli 然后回车键

grunt + bower

分析一下这句安装命令分别代表什么：

npm install ：nodejs的安装插件方式

-g：全局安装

grunt-cli：插件名

确保电脑联网且网足够快

如果安装成功的话会出现grunt-cli的目录结构，安装失败找出原因重新安装即可，成功后类似这样：

grunt + bower

进行验证看是否安装成功：

命令行输入grunt 回车键，证明grunt-cli安装成功

grunt + bower

grunt-cli到这里基本上就安装完成了，接下来建立一个自己的前端项目吧。


3.构建项目目录结构

这里可以1.自己先建立一个简单的进行练手，2.也可以学习以下yoman这类可以直接构建目录结构的工具(npm install -g yo)，3.或者是参考一些优秀的前端工程目录结构。

这里用一个简单的例子做练手，更加方便练习，但如果想要更加专业化，还是参考上边2、3方法

在D盘或者你的任意目录下建立一个文件夹，我的是D:\1Project Workspace\New_Test_Project，然后在这个文件夹中建立需要的文件夹和文件

grunt + bower

接下来要建立一个名叫package.json的文件，有两种建立方式：

1直接建立文本并保存为json文件，内容为：

[html] view plain copy
  1. {  
  2.   "name": "new_test_project",  
  3.   "version": "1.0.0",  
  4.   "description": "test",  
  5.   "main": "index.js",  
  6.   "directories": {  
  7.     "test": "test"  
  8.   },  
  9.   "scripts": {  
  10.     "test": "echo \"Error: no test specified\" && exit 1"  
  11.   },  
  12.   "author": "ds",  
  13.   "license": "ISC"  
  14. }  

其中左边的名称是不可以更改的，右边的一些相当于参数的东西是可以进行更改的。


2.（推荐）在当前也就是D:\1Project Workspace\New_Test_Project这个目录下shift+右键打开命令行，输入npm init，回车键然后按照所需信息一步一步填写下来，项目名必须都是小写字母，版本号、简介等都可以不填写，一路回车下来，最后输入yes，就会发现这个文件已经建立好了：

grunt + bower

4.安装grunt

接下来就是正主grunt的安装了，这里首先介绍一下更改npm下载源的方法，网足够好的可以跳过4.1的步骤接着往下看

4.1将下载源从国外改到淘宝

由于国外网络受网络波动影响大，时常导致下载失败，所以我们的淘宝团队将这些国外的镜像到了国内。

官方：这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

官方地址：https://npm.taobao.org/

执行:npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

4.2正式安装

执行安装命令之前看一下4.1的最后一句话。

在刚才建立的项目目录中打开命令提示符，执行：cnpm install grunt --save-dev

命令分析：

cnpm install： npm方式安装，用淘宝数据源

grunt：我们要安装插件的名字

--save-dev： 在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项，执行后打开package.json后就可已发现新增加了开发依赖项grunt

小tips：这里的名字和--save-dev是可以更换的，不会影响到执行结果，以后类似的命令同样适用，例如本次命令用cnpm install --save-dev grunt 执行的效果是相同的

grunt + bower

首次安装：会出现目录结构

grunt + bower

如果目录中多了node_modules文件夹，说明安装成功了

grunt + bower

这时打开package.json文件，就会发现多了一些代码

grunt + bower

而其中devDependencies的意思就是

然后新建一个名叫Gruntfile.js的文件在项目根目录下，它的作用是用来将我们需要配置的任务（Task）写到里边去执行的，所以先建立一个空文件

 这里要注意的是Gruntfile.js的G是大写，其它小写

grunt + bower

经过以上几个步骤，我们可以认为grunt已经安装成功了，并且分析以上提示：Task ‘default’ not found。 说明我们该配置任务（Task）了，也就是在Gruntfile.js文件中写一些任务

5.配置Gruntfile.js（写Task）

打开Gruntfile.js输入以下官方规定的信息，这个脚本文件的规范就是这样的，所以没有为什么。

看源码，我们已经读取了package.json文件中的信息

[javascript] view plain copy
  1. module.exports = function(grunt){  
  2.   
  3.         grunt.initConfig({  
  4.             pkg: grunt.file.readJSON('package.json'),  
  5.             //这里要写之后的任务  
  6.         });  
  7.   
  8.         //default任务，即默认任务，执行命令为grunt或grunt default  
  9.         grunt.registerTask('default',[]);  
  10.   
  11.   
  12.         //这是之后配置的稍复杂的任务，这里我们先注释掉，稍后解释。  
  13.         //grunt.registerTask('import',['wiredep']);  
  14.         //grunt.registerTask('package', ['copy:js','useminPrepare','concat:dist','uglify:dist','usemin']);  
  15.         //grunt.registerTask('start',['connect','watch:start']);  
  16. };  
这里我们配置好了一个叫default（默认）的任务，它的任务列表，也就是右边的数组是空的，所以它可以启动但是不执行什么任务，这里我们执行这个任务的方式就是在命令提示符中输入grunt或 grunt default，可以得到如下结果
grunt + bower

同时我们再回去看一眼源代码，其它注释掉但有内容的执行方式分别是：grunt import ； grunt package ； grunt start。而其后边的数组中就是它依次要去执行的任务，那这些任务是如何配置的呢，接下来就一一介绍

6.写Task（grunt常用插件介绍）

这里要用到的就是grunt的插件了，这些插件都是从官网被审核后才能上架下载的，当然我们不需要去官网再艾格寻找下载，用我们的npm方式安装即可，但有兴趣的依然可以去官网看一眼

官方地址：http://www.gruntjs.net/plugins

插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。

并不是所有的插件都需要被用到，这里我们只去介绍一些我们用到的，常用的，并且每个插件配置的不同，其用法也不尽相同：

  • grunt-contrib-uglify——压缩javascript代码
  • grunt-contrib-jshint——javascript语法错误检查
  • grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行
  • grunt-wiredep——bower+grunt-wiredep依赖库自动注入（自动将bower下载的包导入html中）
  • grunt-contrib-connect——可配置一个web server服务器
  • grunt-usemin——根据注释替换到 CSS/JS 等资源引用（将原本引用的js、css自动改成发布版本的合并后的js、css）
  • grunt-contrib-copy——复制文件，从一个文件夹复制到另一个文件夹
  • grunt-contrib-concat——合并多个文件的代码到一个文件中（合并js，css）

接下来会大致讲解以下这些插件的用法，但不会详细介绍，只是应用，官网中还有许多更加优秀实用的插件，可以自行查找使用

先从应用的角度来看，我们先讲connect插件和watch插件，有了这两个之后，我们的前端开发就可以这边保存，浏览器中自动刷新看效果了

6.1grunt-contrib-connec

这个插件的作用是配置一个web server服务器，这样我们的前端用记事本都能开发了，这里推荐用IDE：WebStorm开发前端，因为它可以将命令提示符和grunt集成到开发工具中，用起来很方便，这里不细说了，以下为配置详情：

安装方法：命令提示符输入 cnpm install grunt-contrib-connect --save-dev

grunt + bower

同以前一样，我们将这个配置保存到我们的package.json中

grunt + bower

安装完成，下面介绍用法：打开Gruntfile.js修改一些配置

[javascript] view plain copy
  1. module.exports = function(grunt){  
  2.   
  3.      // LiveReload的默认端口号，你也可以改成你想要的端口号  
  4.     var lrPort = 35729;  
  5.     var serveStatic = require('serve-static');  
  6.     var serveIndex = require('serve-index')  
  7.      // 使用connect-livereload模块，生成一个与LiveReload脚本  
  8.      // <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>  
  9.      var lrSnippet = require('connect-livereload')({ port: lrPort });  
  10.      // 使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件  
  11.     var lrMiddleware = function(connect, options, middlwares) {  
  12.       return [  
  13.         lrSnippet,  
  14.         // 静态文件服务器的路径 原先写法：connect.static(options.base[0])  
  15.         serveStatic(options.base[0]),  
  16.         // 启用目录浏览(相当于IIS中的目录浏览) 原先写法：connect.directory(options.base[0])  
  17.         serveIndex(options.base[0])  
  18.       ];  
  19.     };  
  20.   
  21.     grunt.initConfig({  
  22.         pkg: grunt.file.readJSON('package.json'),  
  23.         //这里要写之后的任务  
  24.           
  25.         //connect配置，自动加载web server服务器  
  26.         connect: {  
  27.                 options: {  
  28.                     protocol: 'http',  
  29.                     port: 8081,  
  30.                     hostname: '*',  
  31.                     open:true,  
  32.                     /*keepalive: true,*/  
  33.                     base: ['./']  
  34.                 },  
  35.                 livereload: {  
  36.                 options: {  
  37.                 // 通过LiveReload脚本，让页面重新加载。  
  38.                 middleware: lrMiddleware  
  39.                 }  
  40.             }  
  41.         },  
  42.     });  
  43.   
  44.     //引入插件  
  45.     grunt.loadNpmTasks('grunt-contrib-connect');  
  46.   
  47.   
  48.     //default任务，即默认任务，执行命令为grunt或grunt default  
  49.     grunt.registerTask('default',['connect']);  
  50.   
  51.     //两个任务名字不同可同时存在，执行时只要输入grunt+名字即可，如下：grunt start  
  52.     grunt.registerTask('start',['connect']);  
  53.   
  54.   
  55.     //这是之后配置的稍复杂的任务，这里我们先注释掉，稍后解释。  
  56.     //grunt.registerTask('import',['wiredep']);  
  57.     //grunt.registerTask('package', ['copy:js','useminPrepare','concat:dist','uglify:dist','usemin']);  
  58.     //grunt.registerTask('start',['connect','watch:start']);  
  59. };  
task配置完成，代码中也注释了语句分别是什么，然后我们执行一下任务

grunt + bower

服务器配置成功，当然这时实时修改文件并不能直接让浏览器刷新，我们还需要一个监听插件，即grunt-contrib-watch

6.2grunt-contrib-watch

作用：实时监控文件变化、调用相应的任务重新执行，即配置文件的监听，在文件有变动时候执行task

安装方法：命令提示符输入 cnpm install grunt-contrib-watch --save-dev

安装具体过程同上就不具体说了，不同的地方就是需要配置新的任务，直接给出配置后的Gruntfile.js详情

[javascript] view plain copy
  1. module.exports = function(grunt){  
  2.   
  3.      // LiveReload的默认端口号，你也可以改成你想要的端口号  
  4.     var lrPort = 35729;  
  5.     var serveStatic = require('serve-static');  
  6.     var serveIndex = require('serve-index')  
  7.      // 使用connect-livereload模块，生成一个与LiveReload脚本  
  8.      // <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>  
  9.      var lrSnippet = require('connect-livereload')({ port: lrPort });  
  10.      // 使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件  
  11.     var lrMiddleware = function(connect, options, middlwares) {  
  12.       return [  
  13.         lrSnippet,  
  14.         // 静态文件服务器的路径 原先写法：connect.static(options.base[0])  
  15.         serveStatic(options.base[0]),  
  16.         // 启用目录浏览(相当于IIS中的目录浏览) 原先写法：connect.directory(options.base[0])  
  17.         serveIndex(options.base[0])  
  18.       ];  
  19.     };  
  20.   
  21.     grunt.initConfig({  
  22.         pkg: grunt.file.readJSON('package.json'),  
  23.         //这里要写之后的任务  
  24.           
  25.         //connect配置，自动加载web server服务器  
  26.         connect: {  
  27.                 options: {  
  28.                     protocol: 'http',  
  29.                     port: 8081,  
  30.                     hostname: '*',  
  31.                     open:true,  
  32.                     /*keepalive: true,*/  
  33.                     base: ['./']  
  34.                 },  
  35.                 livereload: {  
  36.                 options: {  
  37.                 // 通过LiveReload脚本，让页面重新加载。  
  38.                 middleware: lrMiddleware  
  39.                 }  
  40.             }  
  41.         },  
  42.         //watch的配置(监听器)  
  43.         watch:{  
  44.                 start:{  
  45.                     files: ['*.html', 'css/*', 'js/*', 'images/**/*','dist/*','src/*','src/js/*'],  
  46.                     options: {  
  47.                         livereload: lrPort  
  48.                     }  
  49.                 }  
  50.             },  
  51.     });  
  52.   
  53.     //引入插件  
  54.     grunt.loadNpmTasks('grunt-contrib-connect');  
  55.     grunt.loadNpmTasks('grunt-contrib-watch');  
  56.   
  57.   
  58.     //default任务，即默认任务，执行命令为grunt或grunt default  
  59.     grunt.registerTask('default',['connect']);  
  60.   
  61.     //两个任务名字不同可同时存在，执行时只要输入grunt+名字即可，如下：grunt start  
  62.     grunt.registerTask('start',['connect','watch:start']);  
  63.   
  64.   
  65.     //这是之后配置的稍复杂的任务，这里我们先注释掉，稍后解释。  
  66.     //grunt.registerTask('import',['wiredep']);  
  67.     //grunt.registerTask('package', ['copy:js','useminPrepare','concat:dist','uglify:dist','usemin']);  
  68.     //grunt.registerTask('start',['connect','watch:start']);  
  69. };  

然后命令行执行task：grunt start

grunt + bower

可以直接自动打开浏览器，并且进入到服务器的文件夹中，说明本地的文件夹已经放到服务器上，可以进行访问了

grunt + bower

设置好对应文件的监听之后，我们可以看到当文件进行修改之后，会生成如下日志，并自动刷新页面

grunt + bower

6.3常用插件配置介绍

本文中所有任务Gruntfile.js源码及讲解：

[javascript] view plain copy
  1. module.exports = function(grunt){  
  2.   
  3.  // LiveReload的默认端口号，你也可以改成你想要的端口号  
  4. var lrPort = 35729;  
  5. var serveStatic = require('serve-static');  
  6. var serveIndex = require('serve-index')  
  7.  // 使用connect-livereload模块，生成一个与LiveReload脚本  
  8.  // <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>  
  9.  var lrSnippet = require('connect-livereload')({ port: lrPort });  
  10.  // 使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件  
  11. var lrMiddleware = function(connect, options, middlwares) {  
  12.   return [  
  13.     lrSnippet,  
  14.     // 静态文件服务器的路径 原先写法：connect.static(options.base[0])  
  15.     serveStatic(options.base[0]),  
  16.     // 启用目录浏览(相当于IIS中的目录浏览) 原先写法：connect.directory(options.base[0])  
  17.     serveIndex(options.base[0])  
  18.   ];  
  19. };  
  20.   
  21.         grunt.initConfig({  
  22.             pkg: grunt.file.readJSON('package.json'),  
  23.             //uglify的配置（js压缩）  
  24.             uglify: {  
  25.                 options: {  
  26.                     // 此处定义的banner注释将插入到输出文件的顶部  
  27.                     mangle: false, //不混淆变量名  
  28.                     preserveComments: 'some', //不删除注释，还可以为 false（删除全部注释），some（保留@preserve @license @cc_on等注释  
  29.                     banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'  
  30.                 },  
  31.                 dist: {  
  32.                     options: {  
  33.                         report: "min",//输出压缩率，可选的值有 false(不输出信息)，gzip  
  34.                     },  
  35.                     files: {  
  36.                         //uglify会自动压缩concat任务中生成的文件  
  37.                         'dist/js/app.min.js': ['dist/js/app.js']  
  38.                     }  
  39.                 }  
  40.             },  
  41.             //jshint的配置（代码校验）  
  42.             jshint:{  
  43.                 build:['src/js/test.js'],  
  44.                 options:{  
  45.                     //这里是覆盖JSHint默认配置的选项  
  46.                     globals: {  
  47.                     jQuery: true,  
  48.                     console: true,  
  49.                     module: true,  
  50.                     document: true  
  51.                     }  
  52.                 }  
  53.             },  
  54.             //watch的配置(监听器)  
  55.             watch:{  
  56.                 build:{  
  57.                     files:['src/*.js'],  
  58.                     tasks:['jshint','uglify'],  
  59.                     options:{spawn:false}  
  60.                 },  
  61.                 start:{  
  62.                     files: ['*.html', 'css/*', 'js/*', 'images/**/*','dist/*','src/*','src/js/*'],  
  63.                     options: {  
  64.                         livereload: lrPort  
  65.                     }  
  66.                 }  
  67.             },  
  68.             //wiredep的配置（自动将bower下载的包导入html中）  
  69.             wiredep: {  
  70.                 target: {  
  71.                     src: ['src/*.html'],  
  72.                     directory:"js/libs"  
  73.                 }  
  74.             },  
  75.             //connect配置，自动加载web server服务器  
  76.             connect: {  
  77.                     options: {  
  78.                         protocol: 'http',  
  79.                         port: 8081,  
  80.                         hostname: '*',  
  81.                         open:true,  
  82.                         /*keepalive: true,*/  
  83.                         base: ['./']  
  84.                     },  
  85.                     livereload: {  
  86.                     options: {  
  87.                     // 通过LiveReload脚本，让页面重新加载。  
  88.                     middleware: lrMiddleware  
  89.                     }  
  90.                 }  
  91.             },  
  92.   
  93.   
  94.             useminPrepare: {  
  95.                 html: 'src/*.html',  
  96.                     options: {  
  97.                     dest: 'dist'  
  98.                 }  
  99.             },  
  100.             usemin: {  
  101.                 html: ['dist/*.html']  
  102.             },  
  103.             //copy任务，将src下的copy到dist  
  104.             copy:{  
  105.                 js:{  
  106.                     expand:true,  
  107.                     cwd:'src/',  
  108.                     src:['*.html'],  
  109.                     dest:'dist/',  
  110.                 },  
  111.             },  
  112.             //合并  
  113.             concat:{  
  114.                 options: {  
  115.                   separator: ';',  
  116.                   stripBanners: true,  
  117.                   banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'  
  118.                 },  
  119.                 dist: {  
  120.                   src: ['src/js/*.js'],  
  121.                   dest: 'dist/js/app.js',  
  122.                 }  
  123.             },  
  124.         });  
  125.   
  126.   
  127.   
  128.   
  129.         grunt.loadNpmTasks('grunt-contrib-uglify');  
  130.         grunt.loadNpmTasks('grunt-contrib-jshint');  
  131.         grunt.loadNpmTasks('grunt-contrib-watch');  
  132.         grunt.loadNpmTasks('grunt-wiredep');  
  133.         grunt.loadNpmTasks('grunt-contrib-connect');  
  134.         grunt.loadNpmTasks('grunt-usemin');  
  135.         grunt.loadNpmTasks('grunt-contrib-copy');  
  136.         grunt.loadNpmTasks('grunt-contrib-concat');  
  137.   
  138.         grunt.registerTask('import',['wiredep']);  
  139.   
  140.         grunt.registerTask('package', ['copy:js','useminPrepare','concat:dist','uglify:dist','usemin']);  
  141.   
  142.         grunt.registerTask('start',['connect','watch:start']);  
  143. }  

以上的三个任务：grunt import、grunt package、grunt start都是我自行进行任务组合配置的，当然如果你足够熟悉每一种插件的作用，完全可以自己进行相应任务的调配。

这些插件的首次安装方式都为：cnpm install 插件名 --save-dev ，这里就不去一一描述了，下载自己需要的插件就可以了

7.发布正式版及插件批量安装

    我们在发布正式版本的时候，是不需要node_modules这个文件夹的，但在开发的时候是需要的，所以我们在发布正式版本的时候，是需要将我们的源代码修改为发布版本之后，保留我们的Gruntfile.js以及package.jsonjson，在命令提示符中输入npm install 即可生成一个node_modules文件夹并安装在package.json的devDependencies中所有的插件，有可能由于网络波动导致安装失败，多装几次就行了。

    如果你想测试一下如上所说的话，将目录中的node_modules删掉，输入npm install即可。

8.集成bower

    我们已经知道了前端开发时，可以进行使用一些插件以协助我们开发，当然当项目上线的时候，是不需要这些插件的。而我们项目中所用到的一些插件，如bootstrap，jquery这些常用的插件，我们需要去官网找并下载源码，那么有没有一种方式来简化这个过程呢，当然，这就是bower

8.1 bower安装

bower大概的意义就是项目中的包管理

安装方法：npm install -g bower

其中-g的意思是全局安装

当我们使用bower进行包的安装时，其路径并不是我们的安装路径

所以我们引入一个.bowerrc文件，注意是以“.”开头的，其内容为：

{
    "directory": "js/libs"
}

这样，我们通过bower安装的文件路径就都为：js下的lib中了

8.2 初始化

bower安装完成后需要进行初始化：

即在命令提示符中输入 bower init，同npm init相同的，也需要输入一些信息，当然也可以一路回车，然后最后确定即可。可以发现目录中的多了bower.json文件

[javascript] view plain copy
  1. {  
  2.   "name": "new_test_project",  
  3.   "description": "test",  
  4.   "main": "index.js",  
  5.   "authors": [  
  6.     "ds"  
  7.   ],  
  8.   "license": "ISC",  
  9.   "homepage": "",  
  10.   "ignore": [  
  11.     "**/.*",  
  12.     "node_modules",  
  13.     "bower_components",  
  14.     "test",  
  15.     "tests"  
  16.   ]  
  17. }  

8.3 包的安装

这里我们用jquery举例

安装方法：命令提示符bower install --save jquery

grunt + bower

然后bower就会从远程下载jquery最新版本到你的js/lib目录下
其中--save参数是保存配置到你的bower.json，你会发现bower.json文件已经多了一行：

grunt + bower

我们到文件夹中去看，项目根目录下的js/libs多了jquery的源文件

grunt + bower

8.4 包的信息

命令提示符输入：bower info jquery

grunt + bower

grunt + bower

即可看到jquery的bower.json的信息，和可用的版本信息

8.5包的更新

想要修改jquery的版本，只要修改bower.json中为：

[javascript] view plain copy
  1. "dependencies": {  
  2.     "jquery": "~1.11.3"  
  3.   }  

然后执行 bower update 就可以就行版本的切换了

8.5 包的查找

命令提示符输入bower search +关键字， 如bower search bootstr，即可搜索出包含bootstr字段的所有可用的包

grunt + bower

8.6包的卸载

包的卸载为unstall命令

如jquery的卸载：bower uninstall jquery



开发过程中使用命令：

grunt serve：开发环境，试试编译本地代码，及时查看效果；

grunt test：测试环境，基于本地生成测试模拟；

grunt dist：发布打包，于dist文件夹中生成可部署文件包；


相关推荐