'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
npm install -g grunt-cli 切换到工程目录,安装3个nodejs模块 npm install grunt --save-dev npm install grunt-contrib-uglify...grunt.loadNpmTasks('grunt-contrib-uglify'); // 加载包含 "htmlmin" 任务的插件。...grunt.loadNpmTasks('grunt-contrib-htmlmin'); // 默认被执行的任务列表。...并且所有Grunt代码都必须指定在这个函数里面: module.exports = function(grunt) { // 在这里处理Grunt相关的事情 } 这个函数里面的内容一般会有一个项目配置...']); 然后就可以使用grunt task1:target1, grunt task2(这个会执行task2下的所有目标), grunt task3来执行了, 其中名称叫default的自定义任务比较特殊
本篇就介绍下如何使用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工具就是使用这些插件来实现自动化。 2. 如何安装Grunt Grunt通过npm命令来安装,所以需要首先安装npm。...之后通过npm安装grunt-cli,即Grunt command line interface。...其实安装完grunt-cli后,并没有安装grunt。...使用Grunt工具前需要准备哪些东西 按理来说,使用grunt命令,只需要有个Gruntfile就可以了,但是上文提到,grunt task runner需要在每个项目中单独安装,所以还得有个保存项目元数据的...('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default
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安装和配置grunt压缩一个js的实例分析grunt 美化、压缩、合并代码文件或者代码文件夹里所有代码文件的代码实例grunt的安装与配置grunt的安装grunt 依赖Node.js...注意:grunt-cli并不是grunt工具本身,只是安装了这个工具,而是用来调用和gruntfile.js同一目录的grunt。真正的grunt是安装在项目目录下面的。...最后,认识一下grunt一些基本的插件:合并文件:grunt-contrib-concat语法检查:grunt-contrib-jshintScss 编译:grunt-contrib-sass压缩文件:...grunt-contrib-uglify监听文件变动:grunt-contrib-watch建立本地服务器:grunt-contrib-connect这些插件都是grunt使用过程中最常用的。
/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); }; 示例
通过本篇你可以了解到: 1 grunt-cli的执行原理 2 nodeJS中模块的加载过程 Grunt-cli原理 grunt-cli其实也是Node模块,它可以帮助我们在控制台中直接运行grunt命令...因此当你使用grunt的时候,往往都是先安装grunt-cli,再安装grunt。...当执行grunt命令时,会默认先去全局的grunt-cli下找grunt-cli模块,而不会先走当前目录下的node_modules的grunt-cli。...看grunt-cli程序的最上面,可以发现grunt-cli是通过同步的方式查找grunt的。 sync就是标准的node模块了: var core = require('....结论 因此,如果你同时安装了本地的grunt-cli、grunt和全局的grunt-cli、grunt,就不会纳闷为什么grunt-cli执行的是全局的、而grunt执行的是当前目录下的node_modules
简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。...Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。 ---- 谁适合阅读本教程?...Node.js 是运行在服务端的 JavaScript,如果你熟悉Javascript,那么你将会很容易的学会Node.js。...当然,如果你是后端程序员,想部署一些高性能的服务,那么学习Node.js也是一个非常好的选择。 ---- 学习本教程前你需要了解 在继续本教程之前,你应该了解一些基本的计算机编程术语。...---- 第一个Node.js程序:Hello World!
是一套前端自动化工具,基于nodeJS的命令行工具,一般用于: ① 压缩文件 ②合并文件 ③简单语法检查 Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作...如果你对 Node.js、NPM 这些名词不太熟悉,建议先去搜索了解一下,因为下面的命令会涉及到它们,但是本文不会过多介绍。...安装 Grunt Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。(可在官网上下载)然后开始安装 Grunt。...实际上,安装的并不是 Grunt,而是 Grunt-cli,也就是命令行的 Grunt,这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。...下面操作将以此来操作,你可以下载或者 clone 下来: https://github.com/yujiangshui/gruntxx 生成 package.json 文件 这个 package.json 文件其实是 Node.js
": "^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('
其一,Gulp 取代 Grunt,基于 Node.js 的前端构建工具发生更迭。 其二,Common JS 规范向前端延伸。...具体表现为: NPM新版官网上线,重新定位为:npm is the package manager for javascript,不再是单纯的后端(Node.js、io.js)包管理工具; jQuery...Studio 2015 CTP 5 的坑、坑、坑 ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序 ASP.NET 5 Starter...Web 專案內建的 NPM 設定檔 package.json 問題解決 Blend 2015 教程(一)基础 Blend 2015 教程(二)样式 Blend 2015 教程(三)模板 Blend 2015...教程(四)控件模板
这篇摘要介绍了Node.js的安装教程。首先,文中简要概述了Node.js的定义和用途,突出了其在构建高性能网络应用方面的优势。...最后,提供了简单的测试步骤,验证Node.js是否成功安装。这篇摘要为初学者提供了清晰而全面的Node.js安装指南。...一、进入官网地址下载安装包 官方网站下载地址:Node.js (nodejs.org) 选择长期维护版本(LTS)下载。...二、安装程序 1、一键安装 下载完成后,双击安装包,安装Node.js,一直点下一步,直到完成。...2、测试安装是否成功 控制台查看Node.js版本: node -v // 显示node.js版本 npm -v // 显示npm版本 如果出现版本号则说明安装成功。
之前博客中大致描述过“前端自动化构建工具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);
node.js 安装教程 下载最新版本的node.js 双击运行下载的文件(Next) 同意协议并点击Next 设置安装的地址并点击Next 点击Next 不勾选点击Next 点击install
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命令,就可以一键完成代码的编译、语法检查、单元测试、合并压缩、生成文档、打包、发布等一系列的工作
一、安装环境 1、本机系统:Windows 10 Pro(64位) 2、Node.js:v6.9.2LTS(64位) 二、安装Node.js步骤 1、下载对应你系统的Node.js版本:https...://nodejs.org/en/download/ 2、选安装目录进行安装 3、环境配置 4、测试 三、前期准备 1、Node.js简介 简单的说 Node.js 就是运行在服务端的 JavaScript...Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。...Node.js 的包管理器 npm,是全球最大的开源库生态系统。...: 此处说明下:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西 五、环境配置
目录 Node.js安装详细教程 下载 安装 环境变量配置 文件结构 配置npm在安装全局模块时的路径和缓存cache的路径 测试 常见命令 Node.js安装详细教程 官网下载地址:Download...| Node.js (nodejs.org) 下载 下载好直接下一步即可,傻瓜式安装 安装 安装的路径默认是C:\Program Files\nodejs\,建议修改 下图根据本身的需要进行...,我选择了默认Node.js runtime,而后Next Node.js runtime :表示运行环境 npm package manager:表示npm包管理器 online documentation...install -g 模块时,下载了一个全局包,这个包的默认存放路径C:\Users\xxx\AppData\Roaming\npm\node_modules下,时间长了肯定会占用C盘的资源,所以需要我们在node.js
随便取一个希望的名字 将JavaScript file设置到当前nodejs安装的grunt-cli路径下grunt运行文件。如下图 ? 然后运行这个任务即可进行grunt调试。...例如grunt dev。就在这增加一个dev参数。
领取专属 10元无门槛券
手把手带您无忧上云