关键词:
Grunt简单教程
1.grunt简单介绍
Grunt是一个基于任务的命令行工具。依赖于node.js环境。
它能帮你合并js文件,压缩js文件,验证js。编译less,合并css。还能够配置自己主动任务。单元測试等等,grunt有许多的插件,能够满足你的大部分需求。
2.怎么安装
先介绍一些东西:
npm是node.js的包管理器通过npm能够下载安装nodejs的模块包
cnpm是淘宝 npm镜像,用此取代官方版本号(仅仅读),同步频率眼下为10分钟一次。
安装cnpm方法
npm install -g cnpm --registry=https://registry.npm.taobao.org
经常使用命令:
node -v 版本号
npm -v 版本号
npm list:查看当前文件夹下已安装的node包
npm help:查看帮助命令
npm install <name> -g
将包安装到全局环境中,在命令行能直接使用
npm update moduleName:更新node模块
npm uninstall moudleName:卸载node模块
npm root:查看当前包的安装路径
npm root -g:查看全局的包的安装路径
假设你之前安装过老的0.3版本号,请先卸载:
npm uninstall -g grunt
安装Grunt命令行(CLI):
npm install -g grunt-cli
注1:-g代表全局安装,Grunt有二个版本号:server端版本号(grunt)和client版本号(grunt-cli)。
注2:安装grunt-cli并不等于安装了grunt!grunt CLI的任务非常easy:调用与Gruntfile在同一文件夹中的grunt。这样带来的优点是。同意你在同一个系统上同一时候安装多个版本号的grunt。而grunt使用模块结构。除了安装命令行界面以外。还要依据须要安装对应的模块。这些模块应该採用局部安装。由于不同项目可能须要同一个模块的不同版本号。
package.json: 此文件被npm用于存储项目的元数据,以便将此项目公布为npm模块。
{ "name": "grunt", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-nodeunit": "~0.1.2", "grunt-contrib-watch": "~0.2.0", "grunt-contrib-concat": "~0.1.1", "grunt-contrib-uglify": "~0.1.0", "grunt-contrib-cssmin": "~0.9.0", "difflet": "~0.2.3" } }
devDependencies里面的參数,指定了项目依赖的Grunt和Grunt插件版本号。当中"~0.1.1"代表安装该插件的某个特定版本号,假设仅仅需安装最新版本号,能够改成"*"。
创建新的Grunt项目
cd到项目目录
方式一:建好package.json文件然后运行:
npm install
这时你会发现项目目录中多了个node_modules目录,其里面就是相应的Grunt和Grunt插件。
方式二:自己主动安装
安装最新版的Grunt:
npm install grunt --save-dev
接着安装我们所须要的插件:
npm install grunt-contrib-cssmin --save-dev
注:当中--save-dev,表示将它作为你的项目依赖加入到package.json文件里devDependencies内。假设你要安装指定版本号的Grunt或者Grunt插件。仅仅须要执行npm install [email protected] --save-dev命令,当中VERSION就是你所须要的版本号(指定版本号号就可以)。
配置任务
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee。用来配置或定义任务(task)并载入Grunt插件
module.exports = function(grunt){ grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), concat: { options: { }, dist: { src: [‘src/**/*.js‘],//src目录下包含子目录下的全部文件 dest: ‘dist/built.js‘//合并文件在dist下名为built.js的文件 } }, uglify: { //文件头部输出信息 options: { banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd HH:mm:ss") %> */ ‘ }, //详细任务配置 build: { src: ‘dist/built.js‘, dest: ‘build/built.min.js‘ } }, cssmin: { build: { src: ["src/css/css1.css", "src/css/css2.css"], dest:"dist/css/cssOut.css" } } }); // 载入提供”uglify”任务的插件 grunt.loadNpmTasks(‘grunt-contrib-uglify‘); grunt.loadNpmTasks(‘grunt-contrib-concat‘); grunt.loadNpmTasks(‘grunt-contrib-cssmin‘); // 默认任务 grunt.registerTask(‘default‘, [‘concat‘,‘uglify‘,‘mincss‘]); }
运行任务
运行配置中全部的任务:
grunt
运行某个特定的任务:
grunt concat
经常使用插件介绍:
grunt-contrib-uglify 压缩js文件
grunt-contrib-concat 合并随意文件
grunt-contrib-jshint 于javascript代码检查(并会给出建议),公布js代码前运行jshint任务,能够避免出现一些低级语法问题
grunt-contrib-mincss 用于css压缩
grunt-contrib-watch 它能监測文件的改动,触发指定任务
grunt-contrib-less less编译
等等
yeoman和grunt使用入门教程
下载地址:百度网盘下载 查看详情
Grafana,写一个简单的插件,不用 grunt 啥的
】Grafana,写一个简单的插件,不用grunt啥的【英文标题】:Grafana,writeasimpleplugin,withoutusinggruntorwhateverGrafana,写一个简单的插件,不用grunt什么的【发布时间】:2018-07-0723:27:29【问题描述】:大家好。我是Grafana的新手,我们最近... 查看详情
bootstrap之编译css和javascript-0基础安装grunt教程
...制台npm的人,学习起来就有很大的难度了。那么我们照着教程一步一步来:第一步:安装node.js网址:https://nodejs.org/en/download/下载版本:node-v6.10.2-x64.msi  查看详情
grunt整合版30分钟学会使用grunt打包前端代码
...nodeJs的命令行工具,一般用于:①压缩文件②合并文件③简单语法检查对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件,初学,有误请包涵准备阶段1、nodeJs环境因为grunt是基于nodeJs的,所以首先各位需... 查看详情
grunt整合版30分钟学会使用grunt打包前端代码
...nodeJs的命令行工具,一般用于:①压缩文件②合并文件③简单语法检查对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩、合并文件,初学,有误请包涵准备阶段1、nodeJs环境因为grunt是基于nodeJs的,所以首先各位需... 查看详情
grunt-学习。
...,用来执行,而不是Grunt这个工具本身1.安装nodenode.js安装教程2.gru 查看详情
设置 nvm 以正确使用 npm 和 grunt
...描述】:我对Web应用程序开发有点陌生,并且浏览了Yeoman教程,该教程使用了yo、grunt、bower和angular。我曾使用自制软件安装node和npm,但由于某些权限等原因,npm不断出现错误。我使用brew卸载了node,而是使用nvm安装n 查看详情
grunt
...于: ①压缩文件 ②合并文件 ③简单语法检查1、grunt.initConfig方法 用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。 每个目标的具体设置,需要参考该... 查看详情
grunt使用入门
...unt插件时项目中一定要package.json,所以在项目中加一个最简单的package.json。不然的话插件安装不上。三、在项目目录下安装grunt npm instalgrunt--save-dev四、我 查看详情
前端工程化系列[04]-grunt构建工具的使用进阶(代码片段)
...主要组件以及它的运转机制,这篇文章是Grunt使用的进阶教程,主要输出以下内容:? Grunt项目的自定义任务? Grunt任务的描述和依赖? Grunt多目标任务和选 查看详情
glup入门
...有什么区别,gulp可以解决grunt存在的哪些问题,以及一个简单的说明例子。什么是gulpgulp的官方定义非常简洁: 基于文件流的构建系统 。这里强调了streaming,也就是gulp与grunt的在构建流程上的主要区别。具体区别在哪里... 查看详情
grunt压缩html和css
一句话:就是自动化,对于需要反复的任务,例如压缩,编译,单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.当你在Gruntfile文件确定配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作.下面咱们来... 查看详情
在 Heroku 上运行 Grunt Build 时出错
...所以我在Heroku上安装了一个使用YeomanBackbonegenerator生成的简单Backbone应用程序。我有一个非常简单的node.js服务器文件来提供Backbone应用程序,但由于缺少依赖项而无法部署到Heroku:输出:remote: 查看详情
关于grunt和gulp
...nodeJs的命令行工具,一般用于:①压缩文件②合并文件③简单语法检查”自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfil... 查看详情
gruntfile.js模板
module.exports=function(grunt){//配置项varAppConfig={name:‘app‘,//源文件目录src:‘app/src‘,//生产文件目录dist:‘app/assets‘};//加载所有的任务require(‘load-grunt-tasks‘)(grunt);//显示每一个任务所花的时间和百分比require(‘time-grunt‘)(grunt); 查看详情
如何使用 grunt-contrib-livereload?
...不起作用并且似乎与文档没有直接关系。我在博客文章或教程或其他任何内容 查看详情
前端工程化系列[03]-grunt构建工具的运转机制(代码片段)
...[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核心组件和运转机制。Grunt是一套前端自动化构建工具,可... 查看详情
由于错误无法运行 grunt 命令:找不到模块“liftoff”
...019-04-2319:58:42【问题描述】:我正在使用Bootstrap4开始一个简单的HTML项目,我想在其中使用已编译的sass。为此,我使用node.js安装了grunt,并在https://gruntjs.co 查看详情