grunt使用基础搭建(代码片段)

wangweizhang wangweizhang     2023-03-09     335

关键词:

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学、不用!废话不多说,直接上干货。

 

1、安装node.js并检查node -v 和 npm -v 

注意:node版本需在v0.8.0及以上版本

 

2、安装Grunt-Cli

npm install -g grunt-cli

 

3、验证grunt-cli是否安装成功

输入grunt命令

//出现以下描述代表安装成功

grunt-cli: The grunt command line interface (v1.3.2)

Fatal error: Unable to find local grunt.

If you‘re seeing this message, grunt hasn‘t been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

https://gruntjs.com/getting-started

 

4、创建项目

//目录解构

reporter                      //根目录

    ++++build                 //打包输出目录
        -------打包生成的文件

    ++++src                   //源代码开发文件目录
        -------add.js
        -------delete.js

Gruntfile.js                  //grunt项目配置文件
package.json                  //项目信息文件(查看依赖)

package.json 内容


    "name": "reporter",
    "version": "1.0.0",
    "devDependencies": 
        
    

// name:项目名称
// version:项目版本号
// devDependencies:项目说安装的依赖项

 

5、局部项目安装grunt

//安装方法

D:
eporter> npm install grunt --save-dev

//--save-dev 保存到局部依赖,进入package.json文件

此时package.json


    "name": "grunt_demo",
    "version": "1.0.1",
    "devDependencies": 
        "grunt": "^1.0.3" //新增刚刚下载的依赖项
    

 

6、配置Gruntfile.js

module.exports=function(grunt)

  //任务配置,所有插件的配置信息
  grunt.initConfig(
    //获取package.json的信息
    pkg:grunt.file.readJSON(‘package.json‘)
  );
 
  //告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序)
  grunt.registerTask(‘default‘,[]);
;

命令行执行grunt

D:
eporter> grunt

//出现以下代表成功配置了grunt基础框架

D:
eporter> grunt

Done.

 

 

 

 

sh使用grunt。(代码片段)

查看详情

grunt-grunt使用(代码片段)

Grunt是前端的构建工具,类似后端使用的Ant,也是通过配置各种任务来达到前端代码自动构建的目地。Grunt和Grunt插件是通过npm 安装并管理的,npm是nodejs 的包管理器,所以第一步需要安装nodejs环境。安装grunt之前... 查看详情

前端工程化系列[04]-grunt构建工具的使用进阶(代码片段)

在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt的主要组件以及它的运转机制,这篇文章是Grunt使用... 查看详情

grunt:使用不同的环境/流程运行多个mocha测试(代码片段)

我想在不同的环境和数据库上运行多个mocha测试。暂定是创建两个单独的grunt配置:grunt.initConfig(//firstonemochaTest:options:...,src:['test/server/*.js'],//secondonemochaTest:options:...,src:['test/slave/*.js'],env:dev:NODE_EN 查看详情

自动化构建--grunt(代码片段)

Grunt怎么使用?Grunt算是最早的一款前端构建系统了,Grunt的插件生态非常的完善,构建过程基于临时文件实现,构建过程稍微会慢一点安装Gruntyarnaddgrunt安装完成后在项目根目录添加Grunt的入口文件gruntfile.jsGrunt的入口文件用于定... 查看详情

grunt-grunt使用(代码片段)

Grunt是前端的构建工具,类似后端使用的Ant,也是通过配置各种任务来达到前端代码自动构建的目地。Grunt和Grunt插件是通过npm 安装并管理的,npm是nodejs 的包管理器,所以第一步需要安装nodejs环境。安装grunt之前... 查看详情

maven基础-02-笔记(代码片段)

...en项目结构1.2项目构建命令mvn2、IDEA工具搭建maven项目2.1不使用原型创建项目2.2使用原型(原型骨架)创建项目-Tomcat插件Maven项目搭建(手动/IDEA)我们回顾一下maven规范的目录结构:1、手动搭建maven项目1.1创建maven项目结构我们先使 查看详情

网络安全学习的基础环境搭建(代码片段)

...目录基础环境搭建一、安装VMware虚拟机(环境搭建中我们使用Windows2008系统)二、基础环境1.WAMP环境搭建(1)在VMware(Windows2008)中安装phpstudy2.notepad++3.phpstudy(1)启动问题(2)http服务(3)mysql(4)php总结基础环境搭建学习网络安全ÿ... 查看详情

使用grunt-contrib-jasmine运行单个规范(代码片段)

在命令行中,如何在使用grunt-contrib-jasmine时指定要运行的单个specfile?我的茉莉花部分看起来像:jasmine:myapp:src:['src/base.js','src/**/*.js'],options:spec:['spec/models/**/*.js','spec/views/**/*.js']我只是想为spec/models/file1.js运行 查看详情

为什么在npm中使用插件的对等依赖?(代码片段)

...dejs.org/en/blog/npm/peer-dependencies/但我真的不明白。例我正在使用AppGyverSteroids,它使用Grunt任务将我的源文件构建到/dist/文件夹中,以便在本地设备上提供。我在npm和grunt都很新,所以我想完全理解发生了什么。到目前为止我得到了... 查看详情

hyperledgerfabric基础环境搭建(代码片段)

...e安装、GO语言环境安装、Git安装和Fabric安装,最终完成可使用的Fabric环境。7.1Docker安装    Docker是一个开源 查看详情

前端工程化系列[03]-grunt构建工具的运转机制(代码片段)

在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核心组件和运转机制。Grunt是一套前端自... 查看详情

grunt基础配置

grunt基础配置要使用grunt来管理项目,一般需要如下的几个步骤:安装grunt命令行工具grunt-cli在项目中安装grunt安装grunt插件建立并配置Gruntfile.js安装grunt命令行工具npminstall-ggrunt-cli在项目中安装gruntnpminstallgrunt--save-dev安装完成后,... 查看详情

使用react-router+hooks搭建基础框架(代码片段)

...同步跟进加了很多hooks,但已经可以完全抛弃redux,仅仅使用useReducer等hooks来管理数据流了(大型、复杂项目的话,目前还是推荐redux)步骤前文中已经配置好webpack了,接下来让我们配置react-router以及redu 查看详情

springboot基础web入门搭建(代码片段)

...序1.父工程2.创建demo项目3.打包创建可执行jar打包war,使用传统容器运行切换嵌入式容器jetty简介springboot现在已经成为java搭建微服务系统的基础技能,生态圈已经越发的完善;网上的资料也 查看详情

dockercompose安装使用,及搭建nginx+php+mysql基础应用实例(代码片段)

当在容器搭建多个实例时,如果用run命令,需要很多遍,如搭建LNMP(nginx+php+mysql),这时可以考虑用Compose这个服务来搭建配置。一、DockerCompose简介:Docker-Compose是Docker的一种编排服务,是一... 查看详情

python集成tornado搭建web基础框架(代码片段)

一、综述基于兴趣尝试使用Python开发语言搭建一个基础的web框架,本次采用的方案是集成tornado方式。项目源码二、开发环境系统需要具备以下开发环境:Python-3.7(Anaconda2020.02)tornado-6.0.3PyCharm开发工具三、python下载tornado库... 查看详情

零基础使用hexo搭建butterfly主题的博客(代码片段)

摘要:最近把博客网站整理了一下,换了一个简洁干净的主题。很多小伙伴问我个人博客怎么搭的,个人网站怎么搭的?你用的Hexo框架还是WordPress框架啊?如果我要搭建网站怎么选择啊?域名咋搞的啊ÿ... 查看详情