grunt基础配置

grunt基础配置

要使用grunt来管理项目,一般需要如下的几个步骤:
  1. 安装grunt命令行工具grunt-cli
  2. 在项目中安装grunt
  3. 安装grunt插件
  4. 建立并配置Gruntfile.js

安装grunt命令行工具

npm install -g grunt-cli

在项目中安装grunt

npm install grunt --save-dev

安装完成后,可以在package.json文件中看到devDependencies中加入了grunt包

  "devDependencies": {    "grunt": "^1.0.1"  }

安装grunt常用插件

插件名
合并文件:grunt-contrib-concat
语法检查:grunt-contrib-jshint
Scss 编译:grunt-contrib-sass
压缩文件:grunt-contrib-uglify
监听文件变动:grunt-contrib-watch
建立本地服务器:grunt-contrib-connect
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

建立并配置Gruntfile.js

一个基本的压缩js文件的配置文件如下,在项目路径下运行grunt命令,即可执行压缩

  • 以下方式会将压缩文件以单独形式压缩
  • 取消ext注释,压缩文件将更改后缀为min.js
  • 注意加上expand配置(否则提示所有文件为空)
module.exports = function(grunt) {  // Project configuration.  grunt.initConfig({    pkg: grunt.file.readJSON(‘package.json‘),    uglify: {      options: {        banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘      },      build: {        expand:true,        //set source folder        cwd: ‘public/js/custom/‘,        src: ‘*.js‘,        //set destination folder        dest: ‘public/pjt/‘,        // ext: ‘.min.js‘      }    }  });  // Load the plugin that provides the "uglify" task.  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);  // Default task(s).  grunt.registerTask(‘default‘, [‘uglify‘]);};

单独运行任务参考:

http://www.cnblogs.com/artwl/p/3449303.html

其他的功能可以在此基础上逐步增加。

【sylar-20170520】

时间: 2024-10-01 08:46:25

grunt基础配置的相关文章

grunt requireJS 的基础配置

module.exports = function(grunt){ //grunt的配置我就不叨叨了 自己看官网就ok了 //我就介绍下grunt的依赖插件grunt-contrib-requirejs //专门打包requeirjs项目的 grunt.initConfig({ //此处的requirejs的配置和requeirjs.config要区分开,那个是requeirjs项目加载配置 //这个是 grunt-contrib-requirejs打包配置 requirejs: { build

Grunt的基础配置

1. 安装node.js,官网下载以后安装,将node.js的bin目录添加到PATH中,方便使用npm来安装grunt所需要的资源. 2. 在安装grunt之前,执行:npm uninstall -g grunt 卸载掉之前安装的grunt 3. 安装全局grunt:npm install -g grunt-cli (包括grunt, grunt-cli, grunt-init,具体百度,google) 4. 然后cd到你项目的根目录下,执行npm init,填写项目信息.就会生成packag

Grunt的配置和使用(一)

Grunt的配置和使用(一) Grunt 和 Grunt 的插件都是通过 Node.js 的包管理器 npm 来安装和管理的.为了方便使用 Grunt ,你应该在全局范围内安装 Grunt 的命令行接口(CLI).要做到这一点,你可能需要使用 sudo (OS X,*nix,BSD 等平台中)权限或者作为超级管理员( Windows 平台)来运行 shell 命令. npm install -g grunt-cli 使用全局安装之后,可以在任何一个目录中运行 grunt 命令. 如何工作 每次运

Varnish基础配置实现动静分离web站点

由于一个web站点的程序的访问具有局部性特征:时间上的局部性:一个数据被访问过之后,可能很快会被再次访问到:空间局部性:一个数据被访问时,其周边的数据也有可能被访问到;varnish可将这部分数据缓存下来.缓存的数据存在被访问较频繁的数据可以称其为热区:缓存同样存在局部性:时效性:如果缓存空间耗尽:则采用LRU,最近最少使用算法:将过期的缓存清理掉 varnish的基本工作原理: Varnish通过类似于HTPP反向代理的方式将可以用来缓存的数据缓存下来直接响应给客户端的缓存数据,如果缓存中没有

使用Java管理Azure(1):基础配置

Azure针对Java开发人员提供了非常丰富的依赖库,开发工具,和相关插件,让你通过Java对Azure进行服务管理和开发,本文第一步先介绍如何快速的配置Java开发工具,主要针对目前比较流行的Eclipse和Intellij IDEA工具. 本文主要是基础配置的介绍,主要分为以下三个部分: 准备Azure的测试账号 准备Eclipse的Azure开发环境 准备Intellij IDEA的Azure开发环境 ? 准备Azure测试账号 首先你需要有Azure中国的测试账号.你可以通过Azure.

DDNS基础配置

一.简介 DDNS全名Dynamic Domain Name Server,动态域名解析服务.是由DNS和DHCP服务器组合来提供服务,简单来说就是通过DHCP服务器分配的IP地址可以动态更新到DNS服务上,免除了手动指定的麻烦. 二.平台介绍 软件包都用了centos自带源安装的 centos6.4 x64 dhcp-4.1.1-31.P1.el6.x86_64 bind-9.8.2-0.10.rc1.el6.x86_64 三.服务器端配置过程 1.DNS服务器配置 我在之前的文章中已经写过如

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DNS的基础配置

一.DNS简介 1.DNS:Domain Name System(域名系统),是互联网上IP和域名相互解析的分布式层级结构的数据库.DNS的出现能够使用户更好的更加方便的访问互联网,不用记IP地址来访问互联网,可以通过人类更容易记住域名来访问互联网. 2.DNS是一种C/S架构的服务器,客户机用于一个名字对应的地址,而服务器是为客户机提供查询的,查询由两种机制:迭代查询和递归查询 迭代查询:一般是DNS服务器与DNS服务器之间的查询方式 递归查询:一般是客户机与服务器之间的查询方式 3.DNS是

zabbix 基础配置(四)

zabbix 基础配置(四) ============================================================================ 展示接口: ★graph:simple,custom: ★screen: ★slide show: 演示:   把之前定义的同类型的监控项,放在一屏上  1)设定图像的名称,要显示的监控项,颜色等根据自己的需要设定  2)在监测中,选择图形,查看自己定义的graphs,如下:  2.把所有的图像展现为一屏   1)

zabbix基础配置(二)

zabbix基础配置(二) ============================================================================= 概述: ============================================================================= zabbix agent安装配置:  安装配置过程 1.安装 # yum install zabbix-agent-3.0.2-1.el7.x86_64