首先安装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实现第九届蓝桥杯打印大X

    打印大X 题目描述 如下的程序目的是在控制台打印输出大X. 可以控制两个参数:图形的高度,以及笔宽. 用程序中的测试数据输出效果: (如果显示有问题,可以参看p1.png) 高度=15, 笔宽=3 * ...

  2. 总结:修改相关postgres用户密码

    1.修改linux系统postgres用户的密码 PostgreSQL会创建一个默认的linux用户postgres,修改该用户密码的方法如下: 步骤一:删除用户postgres的密码 sudo  p ...

  3. centos7上安装memcached以及PHP安装memcached扩展(二)

    开始在 PHP 中使用 Memcached 前, 我们需要确保已经安装了 Memcached  服务,接下来安装 php-memcached 扩展. PHP Memcached 扩展安装 第一步:如果 ...

  4. iOS-键盘弹出或隐藏时调整输入框的位置

    要达到自动调整的目标需要监听 keyboardWillShowNotification 跟 keyboardWillHideNotification, 同时需要实现点击其它地方时,通知隐藏键盘的事件 ...

  5. ZooKeeper使用入门

    ZooKeeper简介 ZooKeeper是一个分布式的,开源的分布式应用程序协调服务,是Hadoop的子项目之一.它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护.域名服务.分布式 ...

  6. cb41a_c++_STL_算法_填充新值fill_generate

    cb41a_c++_STL_算法_填充新值fill_generatefill(b,e,v)fill_n(b,n,v),填充n个vgenerate(b,e,p)generate_n(b,n,p) gen ...

  7. 深入理解 EF Core:EF Core 写入数据时发生了什么?

    阅读本文大概需要 14 分钟. 原文:https://bit.ly/2C67m1C 作者:Jon P Smith 翻译:王亮 声明:我翻译技术文章不是逐句翻译的,而是根据我自己的理解来表述的.其中可能 ...

  8. Python学习日志-01

    一.使用入门 (1)问答环节 人们为何使用Python: 软件质量高:Python更注重可读性.一致性和软件质量,这将其与脚本语言世界中的其他工具区别开来.因为代码的设计致力于可读性,因此比起传统脚本 ...

  9. PHP|PHP之代码编写规范

    PHP之代码编写规范 一.编辑器设置 1.使用Tab缩进(四个空格),不要直接使用空格 2.文件编码格式 二.命名设置 1.公共库名称空间 2.变量命名 2.1.所有字母都使用小写 2.2.首字母根据 ...

  10. linux网络编程-socket(37)

    在编程的时候需要加上对应pthread开头的头文件,gcc编译的时候需要加了-lpthread选项 第三个参数是线程的入口参数,函数的参数是void*,返回值是void*,第四个参数传递给线程函数的参 ...