首先安装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实现第十届蓝桥杯迷宫

    试题 E: 迷宫 本题总分:15 分 [问题描述] 下图给出了一个迷宫的平面图,其中标记为 1 的为障碍,标记为 0 的为可 以通行的地方. 010000 000100 001001 110000 迷 ...

  2. java实现第六届蓝桥杯奇怪的数列

    奇怪的数列 从X星截获一份电码,是一些数字,如下: 13 1113 3113 132113 1113122113 - YY博士经彻夜研究,发现了规律: 第一行的数字随便是什么,以后每一行都是对上一行& ...

  3. 3.keras-简单实现Mnist数据集分类

    keras-简单实现Mnist数据集分类 1.载入数据以及预处理 import numpy as np from keras.datasets import mnist from keras.util ...

  4. Spring之多数据源切换的应用

    这不是一个新的知识点扩展,顶多算是,Spring的AOP特性的一个应用.那么下面开始今天的学习之旅! 场景 数据库读写分离,或者分库,总之多数据源的场景,怎么样实现自动切换(PS:不考虑各种分库分表的 ...

  5. jQuery中ajax 跳入error的原因总结

    一个标准的jquery的ajax代码: $.ajax({ type: 'POST', url: 'getSecondClassification', data: {"sort2": ...

  6. MATLAB作图之一

    问题 在使用MATLAB当中的imagesc作图的时候,如果数据矩阵元素太少,得到的图看起来会很"粗糙"(图1).那么如何得到更为"圆润"的图像呢? A = r ...

  7. @loj - 2987@ 「CTSC2016」时空旅行

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 2045 年,人类的技术突飞猛进,已经找到了进行时空旅行的方法. ...

  8. opencv C++构造并访问单通道和多通道Mat。

    一:构造并访问单通道. int main(){ cv::Mat m=(cv::Mat_<int>(3,2)<<1,2,3,4,5,6); for(int i=0;i<m. ...

  9. 一文读懂:GBDT梯度提升

    先缕一缕几个关系: GBDT是gradient-boost decision tree GBDT的核心就是gradient boost,我们搞清楚什么是gradient boost就可以了 GBDT是 ...

  10. JVM生命周期与运行过程

    1. Java虚拟机的生命周期 Java虚拟机的生命周期 一个运行中的Java虚拟机有着一个清晰的任务:执行Java程序.程序开始执行时他才运行,程序结束时他就停止.你在同一台机器上运行三个程序,就会 ...