grunt--自常用配置文件--js/样式压缩打包,sass工具整合使用
// 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工具整合使用的更多相关文章
- JS,html压缩及混淆工具
现在已经出现了不少有自己特色的: JSMin Javascript compressor Packer Closure Compiler YUI Compressor Pretty Diff Java ...
- 转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)
这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...
- Grunt的配置及使用(压缩合并js/css)
Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...
- r.js压缩打包(require + backbone)项目开发文件
最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...
- r.js压缩打包
AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- Linux中常用压缩打包工具
Linux中常用压缩打包工具 压缩打包是常用的功能,在linux中目前常用的压缩工具有gzip,bzip2以及后起之秀xz.本文将介绍如下的工具常见压缩.解压缩工具以及打包工具tar. gzip2 直 ...
- gulpfile.js 合并压缩 requirejs 的配置文件
var gulp = require("gulp"); // var babel = require("gulp-babel"); // 用于ES6转化ES5 ...
- 前端打包构建工具grunt快速入门(大篇幅完整版)
打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实 ...
随机推荐
- Linux--安装过程中的根文件系统的分析
前言: 在这篇文章中S3C6410公版的Linux BSP和U-Boot为了分析,名词和数据文件的所有内容本文是基于环境为例,所有的代码是在设置的示例进行分析的过程中.哈. 假设有不对或者不完好的地方 ...
- AngularJs ng-repeat
AngularJs ng-repeat 必须注意的性能问题 AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题. 在项目中我们使用 ng ...
- [转]Android与电脑局域网共享之:Samba Server
大家都有这样的经历,通过我的电脑或网上邻居访问另一台计算机上的共享资源,虽然电脑和手机之间可以有多种数据传输方式,但通过Windows SMB方式进行共享估计使用的人并不是太多,下面我就简单介绍一下, ...
- ASP.NET MVC应用程序使用异步及存储过程
ASP.NET MVC应用程序使用异步及存储过程 是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译 ...
- Factovisors - PC110704
欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/uva10139.html 原创: 作者: ...
- SZU:A25 Favorite Number
Judge Info Memory Limit: 32768KB Case Time Limit: 10000MS Time Limit: 10000MS Judger: Number Only Ju ...
- Build FFmpeg for iOS
FFmpeg Build Instructions MAC 10.8 or better Copy ffmpeg-2.0.tar.bz2 (https://ffmpeg.org/releases/ff ...
- Linux网络编程(五)
/*Linux网络编程(五)——多路IO复用之select() 网络编程中,使用IO复用的典型场合: 1.当客户处理多个描述字时(交互式输入以及网络接口),必须使用IO复用. 2.一个客户同时处理多个 ...
- 关于 HttpModule配置问题
在经典模式下,配置到System.web节点 在IIS7以上的集成模式下,要配置到<system.webServer>节点 否则会出现类似一下的错误: 具体配置如下: <config ...
- java遍历Set集合
class Person{ private String name; private int age; public Person(String name,int age){ this.name = ...