// Project configuration.
module.exports = function(grunt) {
// 使用严格模式
'use strict';
// 这里定义我们需要的任务
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//其他任务
concat: {
options: {
separator: ';',
stripBanners: true
},
dist: {
src: [
"js/EvenUtil.js",
"js/smeite.js",
"js/index.js"
],
dest: "assets/js/default.js"
}
},
uglify: {
options: {
},
dist: {
files: {
'assets/js/default.min.js': 'assets/js/default.js'
}
}
},
cssmin: {
options: {
keepSpecialComments: 0
},
compress: {
files: {
'assets/css/default.css': [
"dist/css/test.css",
"dist/css/common.css",
"dist/css/public.css",
"dist/css/index.css"
]
}
}
},
// 设置任务,删除文件夹
clean: {
dist: 'dist'
},
// 通过sass编译成css文件
sass: {
dist: {
files: [{
expand: true,
cwd: 'scss',
src: ['*.scss'],
dest: 'dist/css',
ext: '.css'
}]
}
},
// 检测改变,自动跑sass任务
watch: {
scripts: {
files: ['scss/*.scss','js/*.js','assets/css/*.css'],
tasks: ['sass','concat','uglify','cssmin'],
options: {
spawn: false
}
}
} });
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 一定要引用着3个模块
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// 把需要跑的任务注册到default这里每次运行grunt的时候先删除dist,然后重新编译,最后监测文件夹的情况。
grunt.registerTask('default', ['clean:dist', 'sass:dist', 'concat', 'uglify', 'cssmin', 'watch']);
};

文档说明:样式编辑:scss dist为sass生成,assets为最终压缩成
js编辑:js,assets为最终压缩成

文档说明:样式编辑:scss dist为sass生成,assets为最终压缩成
js编辑:js,assets为最终压缩成

-----sass和grunt的综合应用-----
http://www.gruntjs.net/getting-started --grunt快速入门(创建package.json和Gruntfile.js
准备一份新的 Grunt 项目
一般需要在你的项目中添加两份文件:package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件,文件名是 Gruntfile.js 或 Gruntfile.coffee。

http://blog.csdn.net/playboyanta123/article/details/43230831 安装
http://caibaojian.com/grunt.html --安装

http://caibaojian.com/grunt.html#t3

http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html --值得研究

npm install <name> --save 安装的同时,将信息写入package.json中

npm init 自动生成package.json

grunt--自常用配置文件--js/样式压缩打包,sass工具整合使用的更多相关文章

  1. JS,html压缩及混淆工具

    现在已经出现了不少有自己特色的: JSMin Javascript compressor Packer Closure Compiler YUI Compressor Pretty Diff Java ...

  2. 转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)

    这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...

  3. Grunt的配置及使用(压缩合并js/css)

    Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...

  4. r.js压缩打包(require + backbone)项目开发文件

    最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...

  5. r.js压缩打包

    AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...

  6. webpack配置:css文件打包、JS压缩打包和HTML文件发布

    一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

  7. Linux中常用压缩打包工具

    Linux中常用压缩打包工具 压缩打包是常用的功能,在linux中目前常用的压缩工具有gzip,bzip2以及后起之秀xz.本文将介绍如下的工具常见压缩.解压缩工具以及打包工具tar. gzip2 直 ...

  8. gulpfile.js 合并压缩 requirejs 的配置文件

    var gulp = require("gulp"); // var babel = require("gulp-babel"); // 用于ES6转化ES5 ...

  9. 前端打包构建工具grunt快速入门(大篇幅完整版)

    打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实 ...

随机推荐

  1. SpringMVC数据绑定

    SpringMVC学习系列(5) 之 数据绑定-2   在系列(4)中我们介绍了如何用@RequestParam来绑定数据,下面我们来看一下其它几个数据绑定注解的使用方法. 1.@PathVariab ...

  2. Javascript技巧实例精选(3)—用字符在屏幕上打印金字塔

    用Javascript实现用★字符在屏幕上打印金字塔 >>点击这里下载完整html源码<< 这是最后的截图 这是相应的Javascript源码 //动态创建表格 var s=' ...

  3. Coded UI Test对Webpage进行自动化测试

    如何使用Coded UI Test对Webpage进行自动化测试   在Visual Studio中,Coded UI Test已经不是什么新特性了,较早版本的Visual Studio中就已经有这个 ...

  4. Binder机制,从Java到C (10. Binder驱动)

    Binder驱动的代码都在kernel里面,这里就简单讲一下里面涉及到的几个东西: 1.MemoryBinder其实本质上就是一中数据传输方式,这种方式是通过binder driver实现的. 我们知 ...

  5. WPF中StackPanel的使用方法

    StackPanel 1.StackPanel:释义为是最简单的控制面板,它把其中的UI元素按横向或纵向堆积排列. 2.常用属性:width:获取或设置元素的宽度.Orientation:用于控制面板 ...

  6. 关于MEF

    MEF(Managed Extensibility Framework)是.NET Framework 4.0一个重要的库,Visual Studio 2010 Code Editor的扩展支持也是基 ...

  7. Visual Stuido 2010/2012 扩展:Quick Launcher,快速打开指定文件

    Visual Stuido 2010/2012 扩展:Quick Launcher,快速打开指定文件 Quick Launcher 是一个极其简单但实用的 Visual Studio 扩展,支持 Vi ...

  8. 在.Net中执行js

    在.Net中执行js 利用Noesis.Javascript开源组件可以做到在.net中执行js脚本,同时js脚本也能调用C#函数.这个组件的获得方式:在NuGet中输入搜索"Noesis& ...

  9. c# 数据库更新操作-文本更新和数值更新小差别

    1.文本更新 string strName; sql = "update 模式表 a SET 模式名称 ='"+ strName +"'where a.模式ID =&qu ...

  10. Archives for the category: Fisheye/Crucible

    Archives for the category: Fisheye/Crucible Introducing FishEye and Crucible 3.0 – Search, visualize ...