1. 全局安装 grunt:(倘若之前电脑安装过,则跳过此步骤)

$ cnpm install -g grunt-cli

2. 作为项目的开发依赖(devDependencies)安装:

(此步骤会自动在目录下创建package.json文件,因此无需cnpm init;)

$ cnpm install --save-dev grunt

3. 在项目根目录下创建一个名为 Gruntfile.js 的文件:

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

});

// Default task(s).
grunt.registerTask('default', ['']);//自行补充

};

4. 运行 grunt:

$ grunt

下篇随笔将会对grunt的使用做具体介绍!

入门Grunt前端构建工具的更多相关文章

  1. Gulp vs Grunt 前端构建工具对比

    Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...

  2. 入门gulp前端构建工具

    1. 全局安装 gulp:(倘若之前电脑安装过,则跳过此步骤) $ cnpm install -g gulp 2. 作为项目的开发依赖(devDependencies)安装: (此步骤会自动在目录下创 ...

  3. 前端构建工具 Grunt 入门

    之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...

  4. Gulp, 比Grunt更好用的前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...

  5. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  6. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  7. 前端构建工具-fis3使用入门

    FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 官网地址是: https:/ ...

  8. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  9. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

随机推荐

  1. 2019-8-31-dotnet-将文件删除到回收站

    title author date CreateTime categories dotnet 将文件删除到回收站 lindexi 2019-08-31 16:55:58 +0800 2019-03-2 ...

  2. H3C ACL的标识

  3. 最长上升子序列问题 nlogn 实现算法的简述

    首先举个例子说明最长上升子序列(longest increasing subsequence 缩写 LIS): 1,4,6,2,3,7,5 中1,2,3,5 和1,4,6,7都是最长上升子序列,长度均 ...

  4. 漏洞扫描工具AWVS介绍及安装教程

    PS:webug靶场全都通关了,你也就是个合格的新手了. 上次我们在通关webug靶场第三关的时候,提到一个漏洞扫描工具叫做AWVS.这次我们介绍一下它. 1 AWVS漏洞扫描工具 Acunetix ...

  5. 【75.28%】【codeforces 764B】Decoding

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  6. 2019.12.15 QLU and SNDU期末联赛

    题目列表: 1582.柳予欣的舔狗行为 1587.柳予欣的女朋友们在分享水果 1585.柳予欣和她女朋友的购物计划 1579.FFFFFunctions 1588.Zeckendorf 1586.柳予 ...

  7. video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件

    video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...

  8. Channel 9视频整理【4】

    Eric ShangKuan 目前服務於台灣微軟,擔任技術傳教士 (Technical Evangelist) 一職,網路上常用的 ID 為 ericsk,對於各項開發技術如:Web.Mobile.A ...

  9. 009.MFC_Spin

    数值调节按钮CSpinButtonCtrl属性 Alignment Auto Buddy Set Buddy integer成员函数 SetRange32() SetBase()

  10. 微信群打卡机器人XiaoV项目开源 | 蔡培培的独立博客

    原文首发于蔡培培的独立博客.原文链接<微信群打卡机器人XiaoV项目开源>. 5月21日,在米花(后面" 亚里士多德式友谊"专题会提及)的影响下,决定搞个私人运动群,拉 ...