首先安装grunt-cli

cnpm install -g grunt-cli

接下来创建package.json,内容如下

{  
      "name": "demo",  
      "file": "zepto",  
      "version": "0.1.0",  
      "description": "demo",  
      "license": "MIT",  
      "devDependencies": {  
        "grunt": "~0.4.1",  
        "grunt-contrib-jshint": "~0.6.3",  
        "grunt-contrib-concat": "~0.5.0",  
        "grunt-contrib-uglify": "~0.2.1",  
        "grunt-contrib-requirejs": "~0.4.1",  
        "grunt-contrib-copy": "~0.4.1",  
        "grunt-contrib-clean": "~0.5.0",  
        "grunt-strip": "~0.2.1"  
      },  
      "dependencies": {  
        "express": "3.x"  
      }  
    }

也可以使用npm init来进行初始化

创建Gruntfile.js,只做合并和压缩

module.exports = function (grunt) {  
      grunt.initConfig({  
      concat: {  
        options: {  
        },  
        dist: {  
          src: ['src/**/*.js'],//src文件夹下包括子文件夹下的所有文件  
          dest: 'dist/built.js'//合并文件在dist下名为built.js的文件  
        }  
      },  
      uglify: {  
         build: {  
            src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件  
            dest: 'dist/built.min.js'//压缩文件为built.min.js  
          }  
       }  
    });  
      grunt.loadNpmTasks('grunt-contrib-uglify');  
      grunt.loadNpmTasks('grunt-contrib-concat');  
        
      grunt.registerTask('default', ['concat','uglify']);  
    }

接下来执行cnpm(npm) install,下载好依赖包

接下来执行grunt

grunt之easy demo的更多相关文章

  1. 【grunt整合版】30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  2. 【grunt第三弹】grunt在前端实际项目中的应用

    前言 [grunt第二弹]30分钟学会使用grunt打包前端代码(02) [grunt第一弹]30分钟学会使用grunt打包前端代码 经过前两次的学习,我们了解了grunt打包的一些基础知识,对于压缩 ...

  3. 使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  4. 【grunt整合版】 30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  5. 30分钟学会使用grunt打包前端代码【mark】

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  6. 【grunt整合版】学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  7. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  8. 使用grunt完成requirejs的合并压缩和js文件的版本控制

    最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...

  9. 基于Grunt构建一个的项目

    没有搭建环境的,请参考<Grunt自动化构建环境搭建 >,搭建完成后 新建一个项目目录,这里建立一个“Demo”目录 运行CMD,并进入这个目录,运行 npm install grunt ...

随机推荐

  1. java实现黄金队列

    ** 黄金队列** 黄金分割数0.618与美学有重要的关系.舞台上报幕员所站的位置大约就是舞台宽度的0.618处,墙上的画像一般也挂在房间高度的0.618处,甚至股票的波动据说也能找到0.618的影子 ...

  2. PAT 部分A+B

    正整数​​A的“DA(为 1 位整数)部分”定义为由A中所有DA组成的新整数PA,例如:给定A=3862767,DA=6,则A的“6 部分”PA是 66,因为A中有 2 个 6. 现给定A,DA,B, ...

  3. iOS-线程&&进程的深入理解

    进程基本概念 进程就是一个正在运行的一个应用程序; 每一个进度都是独立的,每一个进程均在专门且手保护的内存空间内; iOS是怎么管理自己的内存的,见博客:博客地址 在Linux系统中,想要新开启一个进 ...

  4. LiveCharts 提示框(DataTooltip)百分比一直为0.00%解决办法

    LiveCharts 提示框(DataTooltip)百分比一直为0.00%解决办法 问题描述:在使用LiveCharts 开源图标库的时候,使用CartesianChart类图表,当Series为L ...

  5. Flume-1.4.0和Hbase-0.96.0整合

    在使用Flume的时候,请确保你电脑里面已经搭建好Hadoop.Hbase.Zookeeper以及Flume.本文将以最新版的Hadoop-2.2.0.Hbase-0.96.0.Zookeeper-3 ...

  6. sockaddr_in与sockaddr区别

    先粘代码 struct sockaddr { __SOCKADDR_COMMON (sa_); /* Common data: address family and length. */ char s ...

  7. CFS三层网络环境靶场实战

    一.环境搭建: ①根据作者公开的靶机信息整理 共有三个targets,目标是拿下三台主机权限,且是三层的网络环境,内网网段有192.168.22.0/24和192.168.33.0/24,添加两张仅主 ...

  8. 手把手教你利用Docker+jenkins部署你的网站

    更新服务器的安装源为阿里的源,参考链接:https://blog.csdn.net/js_xh/article/details/79166655 安装docker; 1 更新资源 sudo apt-g ...

  9. Springboot项目整合Swagger2报错

    SpringBoot2.2.6整合swagger2.2.2版本的问题,启动SpringBoot报如下错: Error starting ApplicationContext. To display t ...

  10. Web前端 -- Webpack

    一.Webpack Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 二.Webpack安装 1.全局安装 npm i ...