一、安装grunt:

npm install -g grunt-cli //安装
npm install grunt –save-dev //安装Grunt最新版本到项目目录中,并将其添加到devDependencies内
grunt –version //出现grunt -cli 和 grunt的版本号即安装成功

二、配置packge.json文件:
【代码中去掉注释】

module.exports = function(grunt) {

  // Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), transport: {
webqq: {
files: {
//零时文件夹 提取依赖的文件
".build": ["main.js","range.js","scale.js","drag.js"]
}
}
}, concat: {
webqq: {
files: {
//合并后的新文件
"dist/main.js": [".build/main.js",".build/range.js",".build/scale.js",".build/drag.js"]
}
}
}, uglify: {
webqq: {
files: {
//压缩的文件
"dist/main.min.js": "dist/main.js"
}
}
} }); //加载插件
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['transport','concat','uglify']); }; };

四、在命令行输入:

grunt
就实现了合并,压缩的操作;在dist目录下找到相应的文件。

grunt和seajs入门之--提取依赖、合并、压缩js文件的更多相关文章

  1. GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)

    一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...

  2. 如何使用grunt压缩js文件

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  3. 吉特仓储管系统(开源)--使用Grunt压缩JS文件

    在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩.文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找, ...

  4. asp.net core合并压缩资源文件引发的学习之旅

    0. 在asp.net core中使用BuildBundlerMinifier合并压缩资源文件 在asp.net mvc中可以使用Bundle来压缩合并css,js 不知道的见:http://www. ...

  5. uglifyjs 合并压缩 js, clean-css 合并压缩css

    本文主要介绍如何通过CLI命令行(也就是终端或者cmd打开的那个shell窗口)实现 js和 css 的合并压缩. uglifyjs 合并压缩 js: 1.安装node 这一步就不多说了,下载node ...

  6. asp.net core合并压缩资源文件(转载)

    在asp.net core中使用BuildBundlerMinifier合并压缩资源文件 在asp.net mvc中可以使用Bundle来压缩合并css,js 不知道的见:http://www.cnb ...

  7. 使用grunt合并压缩js、css文件

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...

  8. 简单使用grunt、bower工具合并压缩js和css

    前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些 ...

  9. grunt 合并压缩js和css文件(二)

    具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...

随机推荐

  1. 【TensorFlow-windows】(四) CNN(卷积神经网络)进行手写数字识别(mnist)

    主要内容: 1.基于CNN的mnist手写数字识别(详细代码注释) 2.该实现中的函数总结 平台: 1.windows 10 64位 2.Anaconda3-4.2.0-Windows-x86_64. ...

  2. 图像处理之增强---图像增强算法四种,图示与源码,包括retinex(ssr、msr、msrcr)和一种混合算法

    申明:本文非笔者原创,原文转载自:http://blog.csdn.net/onezeros/article/details/6342661 两组图像:左边较暗,右边较亮 第一行是原图像,他们下面是用 ...

  3. Geeks LCA最低公共单亲节点

    给出一颗二叉树.找到两个值的最小公共节点. 假设两个值都会在树中出现. 假设可能不会出现的话,也非常easy.就查找一遍看两个值是否在树中就能够了.假设不在就直接返回NULL. 基本思想:就是在二叉树 ...

  4. Dropout: A Simple Way to Prevent Neural Networks fromOverfitting

    https://www.cs.toronto.edu/~hinton/absps/JMLRdropout.pdf Deep neural nets with a large number of par ...

  5. 使用官方Android-support-v7在低版本上使用ActionBarActivity

    昨天晚上更新了下Android SDK Manager,发现Extras下的Android Support Library已经更新到19.1了,上网一查原来是sdk\extras\android\su ...

  6. Linux-正则表达式学习(精)

    正则表达式30分钟入门教程 来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial. 由于评论里有过长的URL,所以本页排版比较混 ...

  7. Windows程序设计(1)——Win32运行原理(二)

    创建进程 1 进程和线程 2 应用程序的启动过程 3 CreateProcess函数 4 实例 3 创建进程 3.1 进程和线程 进程通常被定义为一个存在运行的程序的实例.进程是一个正在运行的程序,它 ...

  8. HTML预览 正则替换

    1. [代码][PHP]代码  <?php    if(!defined('BASEPATH')) exit('No direct script access allowed');    /** ...

  9. nyoj 1030 hihocoder 1338

    题目链接1: 点这里打开. 题目链接2:   点击打开链接 思路:dp,dp[i][j] 表示某个人在区间 i,j上的得分. sum数组表示前 n 项和, num 数组用来存输入的数字. 因为取数字是 ...

  10. 配置react+webpack+es6中的一些教训

    1.要用es6,因为目前浏览器的支持情况,那么肯定需要插件将e6的代码转换成es5,我用的是babel-loader,事实证明使用6.x版本似乎是不行的,我换成5.3.2之后就成功了. 2.webpa ...