通过本篇你可以了解到： 1 grunt-cli的执行原理 2 nodeJS中模块的加载过程 Grunt-cli原理 grunt-cli其实也是Node模块，它可以帮助我们在控制台中直接运行grunt命令...因此当你使用grunt的时候，往往都是先安装grunt-cli，再安装grunt。...\\grunt-cli linux: /nodejs/node_modules/grunt-cli 在这里可以直接看到编译后的代码。...当执行grunt命令时，会默认先去全局的grunt-cli下找grunt-cli模块，而不会先走当前目录下的node_modules的grunt-cli。...结论 因此，如果你同时安装了本地的grunt-cli、grunt和全局的grunt-cli、grunt，就不会纳闷为什么grunt-cli执行的是全局的、而grunt执行的是当前目录下的node_modules
'use strict'; module.exports = function(grunt) { var fs = require('fs'); // 构建的初始化配置 grunt.initConfig...('grunt-contrib-concat'); //https://github.com/gruntjs/grunt-contrib-concat grunt.loadNpmTasks...('grunt-text-replace'); //https://www.npmjs.com/package/grunt-text-replace grunt.loadNpmTasks...('grunt-html-build'); //https://github.com/spatools/grunt-html-build // 注册刚配置好的任务 grunt.registerTask...-- grunt占位，动态生成lib.js --> <!
npm install -g grunt-cli //全局安装grunt npm init -y //初始化package.json npm install grunt --save-dev...//在项目中安装grunt grunt --help //查看更多信息 grunt 安装完毕 新建Gruntfile.js 随便举得例子1： module.exports= function...(grunt) { grunt.registerTask('default', function () { console.log('aaaaaaaa'); /...(grunt) { grunt.registerTask('a', function (name) { grunt.log.writeln('hello'+name);...}); grunt.registerTask('b', function () { grunt.log.writeln('hello2') }); grunt.registerTask
"$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" #安装nodejs brew install node #安装grunt-cli...npm install -g grunt-cli 切换到工程目录，安装3个nodejs模块 npm install grunt --save-dev npm install grunt-contrib-uglify...grunt.loadNpmTasks('grunt-contrib-htmlmin'); // 默认被执行的任务列表。...并且所有Grunt代码都必须指定在这个函数里面： module.exports = function(grunt) { // 在这里处理Grunt相关的事情 } 这个函数里面的内容一般会有一个项目配置...']); 然后就可以使用grunt task1:target1, grunt task2(这个会执行task2下的所有目标), grunt task3来执行了, 其中名称叫default的自定义任务比较特殊
Grunt生态圈里面有大量的插件，Grunt工具就是使用这些插件来实现自动化。 2. 如何安装Grunt Grunt通过npm命令来安装，所以需要首先安装npm。...之后通过npm安装grunt-cli，即Grunt command line interface。...为了在所有目录下都可以使用grunt命令，需要加-g参数，指令如下： npm install -g grunt-cli 注意：有的发行版在使用npm命令时需要root权限，前面要加sudo命令。...其实安装完grunt-cli后，并没有安装grunt。...这里面的原理大概是这样的：grunt-cli只用来寻找通过nodejs的require工具(或在package.json的dependencies)已经安装好的本地的grunt,然后执行之。
本篇就介绍下如何使用Grunt进行构建。 grunt安装 由于grunt依赖于nodejs，因此需要先安装nodejs。而安装grunt又需要使用npm包管理器。 ...使用npm命令安装grunt-cli,这是一款grunt的客户端程序。 ...命令如下： npm install -g grunt-cli 安装好后，进入项目目录，安装grunt： 命令如下： npm install grunt --save-dev 安装好后，就会出现如下的目录...这样就可以使用grunt了、 安装疑问 由于只能通过npm安装grunt，因此只能从镜像网站上下载。 但是当我通过代理上网时，安装npm install命令总是报错，很是无奈。
Grunt的三大主要组成部分： Grunt CLI Grunt Task Runner Grunt Plugins Grunt CLI 安装： npm install grunt-cli -g 上面的命令将全局安装...grunt-cli 包，这样在任何目录下都可以调用grunt命令。...Grunt CLI不包括grunt task runner。 要使用 grunt task runner，我们需要将其作为应用的开发依赖安装。...grunt和grunt-cli的分离确保每个团队的成员使用同一版本的grunt task runner。 Grunt Task Runner grunt命令会调用Grunt task runner。...接着我们加载了grunt-contrib-uglify插件。在运行grunt命令之前，确保插件已经安装。所有的grunt插件都可以通过npm安装。
以下内容分别是：grunt安装和配置grunt压缩一个js的实例分析grunt 美化、压缩、合并代码文件或者代码文件夹里所有代码文件的代码实例grunt的安装与配置grunt的安装grunt 依赖Node.js...,所以请先确保安装完成Node.js.首先安装 grunt-cli工具。...npm install grunt-cli -g记住：这里是全局安装。windows系统可能需要开启管理员权限启动命令行。...注意：grunt-cli并不是grunt工具本身，只是安装了这个工具，而是用来调用和gruntfile.js同一目录的grunt。真正的grunt是安装在项目目录下面的。...grunt-contrib-uglify监听文件变动：grunt-contrib-watch建立本地服务器：grunt-contrib-connect这些插件都是grunt使用过程中最常用的。
安装 Grunt Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。（可在官网上下载）然后开始安装 Grunt。...实际上，安装的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。...但是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具本身。...安装 Grunt-cli 需要使用 NPM，使用下面一行即可在全局范围安装 Grunt-cli ，换句话说，就是你可以在任何地方执行 grunt 命令： npm install -g grunt-cli...需要注意，因为使用 －g 命令会安装到全局，可能会涉及到系统敏感目录，如果用 Windows 的话，可能需要你用管理员权限，如果用 OS X ／ Linux 的话，你可能需要加上 sudo 命令。
/grunt-contrib-clean grunt-contrib-copy 复制文件和文件夹 https://github.com/gruntjs/grunt-contrib-copy grunt-contrib-concat.../FWeinb/grunt-svgstore grunt-csscomb （CSS）格式化 https://github.com/csscomb/grunt-csscomb grunt-contrib-less...grunt-contrib-htmlmin （HTML文件）压缩 https://github.com/gruntjs/grunt-contrib-htmlmin grunt-filerev 文件内容...hash（MD5） https://github.com/yeoman/grunt-filerev grunt-filerev-replace 替换通过grunt-filerev的文件引用 https:...require('load-grunt-tasks')(grunt); /* 统计各个任务执行时间 */ require('time-grunt')(grunt); }; 示例
": "^0.4.5", "grunt-contrib-concat": "^1.0.1", "grunt-contrib-connect": "^1.0.2", "grunt-contrib-copy...('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-copy...'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-contrib-jshint');...grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks...('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); grunt.registerTask('
之前博客中大致描述过“前端自动化构建工具Grunt”及“grunt[mismatched:define]”等信息。...通过npm install grunt --save-dev 安装grunt依赖; C....grunt.loadNpmTasks('grunt-contrib-copy'); 可以通过“load-grunt-tasks”进行一次性载入所有插件，无需依依引入。...require('load-grunt-tasks')(grunt); 4....可以通过插件“time-grunt”进行统计每个Task执行时间 require('time-grunt')(grunt);
-linux-x64.tar.xz /opt ③设置环境变量vi /etc/profile,增加或修改如下两行 export NODEJS_HOME=/opt/nodejs/node-v8.11.3-linux-x64...①执行 npm install -g grunt-cli，如果安装不成功，把镜像换成国内的，执行 npm install -g grunt-cli --registry=https://registry.npm.taobao.org.... ②然后执行 npm install -g grunt-cli --registry=https://registry.npm.taobao.org 如出现error phantomjs-prebuilt...# 全局安装 npm install -g grunt-cli #加上-g的话是使用全局安装，npm会在设置的全局路径下安装。方便统一管理。...npm list -g 或者 npm ls -g 7.指定镜像安装 npm install --registry=https://registry.npm.taobao.org npm install grunt-cli
作为开篇，我们对命令行接口和linux命令做一下简介。之后的几篇我们会进入到linux常用基础命令的讲解中。let's begin!...当前各种操作系统实现的人机交互接口中，最重要的两种为：CLI和GUI。...CLI或者说command-line interface(命令行接口)，是一种通过在终端窗口中键入文本命令来实现与计算机交互的接口。...一个linux系统中包含大量的命令，通常每个命令又包含许多选项或参数。要在一篇或几篇博文内去讲解清楚每个命令的用法是不现实的。好在linux系统中有这些命令的手册(manual)。用户随时可以查阅。...熟练掌握bash和各种基础命令的用法，是一个linux系统管理员必不可少的技能。而且透过命令行接口，还能让其他计算机软硬件从业人员或爱好者了解操作系统的工作原理。
by /usr/lib/node_modules/grunt /usr/bin/grunt -> /usr/lib/node_modules/grunt/bin/grunt /usr/lib └──...grunt@1.0.1 [root@node1 ~]# [root@node1 ~]# npm install -g grunt-cli --registry=https://registry.npm.taobao.org...--no-proxy /usr/bin/grunt -> /usr/lib/node_modules/grunt-cli/bin/grunt /usr/lib └─┬ grunt-cli@1.2.0...-version grunt-cli v1.2.0 [es@node1 ~]$ 三、安装head 1、下载head插件源码 [es@node1 ~]$ wget https://github.com..._64.tar.bz2-extract-1515165531727/phantomjs-2.1.1-linux-x86_64 -> /home/es/elasticsearch-head-master/
by /usr/lib/node_modules/grunt /usr/bin/grunt -> /usr/lib/node_modules/grunt/bin/grunt /usr/lib └──...grunt@1.0.1 [root@node1 ~]# [root@node1 ~]# npm install -g grunt-cli --registry=https://registry.npm.taobao.org...--no-proxy /usr/bin/grunt -> /usr/lib/node_modules/grunt-cli/bin/grunt /usr/lib └─┬ grunt-cli@1.2.0...-version grunt-cli v1.2.0 [es@node1 ~]$ （5）下载head插件源码 [es@node1 ~]$ wget https://github.com/mobz/elasticsearch-head..._64.tar.bz2-extract-1515165531727/phantomjs-2.1.1-linux-x86_64 -> /home/es/elasticsearch-head-master/
.tar.gz [root@oa3 other]# wget https://npm.taobao.org/mirrors/node/latest-v4.x/node-v4.4.7-linux-x64....、安装grunt grunt是基于Node.js的项目构建工具，可以进行打包压缩、测试、执行等等的工作，head插件就是通过grunt启动 cd /oa/other/elasticsearch-head-master.../ npm install -g grunt-cli 查看是否安装成功 grunt -version 控制台输出 grunt-cli v1.3.1 7、安装依赖 切换进入elasticsearch-head-master...server，出现 grunt-cli: The grunt command line interface (v1.3.1) Fatal error: Unable to find local grunt...其实head的启动用是基于grunt启动，只要找出grunt进程，然后关闭进程号就行 [root@oa3 elasticsearch-head-master]# ps -ef | grep grunt
随便取一个希望的名字 将JavaScript file设置到当前nodejs安装的grunt-cli路径下grunt运行文件。如下图 ? 然后运行这个任务即可进行grunt调试。...例如grunt dev。就在这增加一个dev参数。
linux安装和windows安装Nodejs差不多，都是下载包、解压、开用。...先去官网下载一个linux版本的安装包（下首页的那个就行）。下载以后发现是 xz后缀，先得用xz命令解压成tar，再用tar完成解压。...undefined 然后用npm测试安装grunt-cli： $ npm install -g grunt-cli /yourpath/node-v4.5.0-linux-x64/node_global.../bin/grunt -> /yourpath/node-v4.5.0-linux-x64/node_global/lib/node_modules/grunt-cli/bin/grunt grunt-cli...@1.2.0 /me/soft/node/node-v4.5.0-linux-x64/node_global/lib/node_modules/grunt-cli ├── grunt-known-options
grunt是什么 grunt是目前非常流行的前端构建工具，支持自定义插件，有丰富的插件帮助我们完成构建任务 自动化完成我们指定的任务，例如压缩、编译、单元测试、linting等 前端为什么需要构建工具...那么我们就需要生成文档，来描述各个模块和方法 这时我们就会发现，开发之外的工作繁琐了很多，不仅需要写好代码，还需要做好 合并压缩、单元测试 等一系列的工作，我们就会渴望有一个便利的构建工具来完成这些工作 grunt...能做什么 我们在grunt中定义好各个任务，让grunt来自动完成这些任务 例如： （1）合并压缩，把多个js或css文件合并、压缩 （2）对js进行语法检查 （3）js单元测试 （4）执行编译 现在很多项目使用了...SASS、LESS进行css开发，那么我们就可以定义一个任务，把SASS、LESS自动编译成正常的css文件 （5）生成项目文档 这几个例子只是grunt功能的一部分，它还可以做很多事情 现在我们就对...grunt有了一个大概的了解： grunt其实就是帮助我们简化项目的发布流程，只要定义好任务，然后执行一下grunt命令，就可以一键完成代码的编译、语法检查、单元测试、合并压缩、生成文档、打包、发布等一系列的工作
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
