module.exports = function(grunt) {

    // LiveReload的默认端口号,你也可以改成你想要的端口号
    var lrPort = 35729;
    // 使用connect-livereload模块,生成一个与LiveReload脚本
    // <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>
    var lrSnippet = require('connect-livereload')({
        port: lrPort
    });
    // 使用 middleware(中间件),就必须关闭 LiveReload 的浏览器插件
    var lrMiddleware = function(connect, options) {
        return [
            // 把脚本,注入到静态文件中
            lrSnippet,
            // 静态文件服务器的路径
            connect.static(options.base),
            // 启用目录浏览(相当于IIS中的目录浏览)
            connect.directory(options.base)
        ];
    };

    // 项目配置(任务配置)
    grunt.initConfig({
        // 读取我们的项目配置并存储到pkg属性中
        pkg: grunt.file.readJSON('package.json'),
        // 通过connect任务,创建一个静态服务器
        connect: {
            options: {
                // 服务器端口号
                port: 8000,
                // 服务器地址(可以使用主机名localhost,也能使用IP)
                hostname: 'localhost',
                // 物理路径(默认为. 即根目录) 注:使用'.'或'..'为路径的时,可能会返回403 Forbidden. 此时将该值改为相对路径 如:/grunt/reloard。
                base: '.'
            },
            livereload: {
                options: {
                    // 通过LiveReload脚本,让页面重新加载。
                    middleware: lrMiddleware
                }
            }
        },
        // 通过watch任务,来监听文件是否有更改
        watch: {
            client: {
                // 我们不需要配置额外的任务,watch任务已经内建LiveReload浏览器刷新的代码片段。
                options: {
                    livereload: lrPort
                },
                // '**' 表示包含所有的子目录
                // '*' 表示包含所有的文件
                files: ['html/*.html', 'css/*.css', 'js/*.js', 'images/**/*']
            },
        },
        concat: {           //合并任务
            js: {       //合并任务名字--合并js
                files: {   //合并文件对应关系
                    'dist/js/test.js': ['js/*.js'],
                }
            },
            css: {        //合并任务名字--合并css
                files: {
                    'dist/css/test.css': ['css/*.css']
                }
            }
        },
        cssmin: {
            //文件头部输出信息
            options: {
                banner: '/*creat: <%= new Date() %> */',

           compatibility : 'ie8', //设置兼容模式
                  noAdvanced : true //取消高级特性

//美化代码
                beautify: {
                    //中文ascii化,非常有用!防止中文乱码的神配置
                    ascii_only: true
                }
            },
            my_target: {
                files: [    //文件数组格式,同时允许每个映射拥有附加属性                   {'dist/css/common.min.css': ['css/common.css']},                   {'dist/css/index.min.css': ['css/index.css'],filter:'isfile'}                ]
            },
            my_target: {
                files:  {   //文件对象格式                   'dist/css/common.min.css': ['css/common.css'],                   'dist/css/commin.min.css':['css/common.css']                }
            }
        }

    }); // grunt.initConfig配置完毕

    // 监控html js css
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('live', ['connect', 'watch']);

    grunt.loadNpmTasks('grunt-contrib-concat'); //合并任务
    grunt.loadNpmTasks('grunt-contrib-cssmin');
};

grunt 合并压缩任务的更多相关文章

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

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

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

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

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

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

  4. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  5. 使用grunt完成requirejs的合并压缩和js文件的版本控制

    最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...

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

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

  7. grunt 单独压缩多个js和css文件【转】

    原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...

  8. 介绍一种基于gulp对seajs的模块做合并压缩的方式

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块 ...

  9. ASP.NET MVC Bundle使用 合并压缩

    2017-01-06 更新 在 BundleCollection 的构造函数中添加了 3种默认规则 public BundleCollection() { BundleCollection.AddDe ...

随机推荐

  1. CMD打开远程并使用空白密码远程登录

    记录一下,在单位管理局域网机器时 写出的小程序: 应用场景:比如异地A的局域网内主机需要远程登录进入系统调试,而A电脑的Radmin之类的远程控制软件无效,就只能使用操作系统自带的远程桌面功能,而,异 ...

  2. java基础(十三)常用类总结(三)

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  3. Add external tool in the Android Studio

    Add external tool in the Android Studio */--> pre { background-color: #2f4f4f;line-height: 1.6; F ...

  4. 数据结构学习笔记——stack实现(数组篇)

    一 栈:是一种表,限制插入和删除只能在一个位置,也即是表的末端(也是栈的顶)进行. 基本操作:push 和 pop. 二 栈的数组实现: 运用数组来存储元素,和栈操作先关的是theArray(一个数组 ...

  5. ASP.NET与SOAP协议使用记录

    近期初次接手一个公司的管理系统开发任务,因为公司需要有Android,IOS客户端,又要求有PC端的网页客户端....对服务请求的要求自然也就落在了统一接口访问上了.... 使用ASP.NET的WEB ...

  6. DEDECMS5.7 首页和栏目页调用文章按权重排序

    dedecms 5.7版本已增加按权重排序功能: [arclist]标签增加按权重排序,在后台管理DEDE里找到以下目录\include\taglib中的arclist.lib.php文件并打开 大约 ...

  7. ng-select ng-options ng-repeat的用法与区别

    最近在用angularJS里的ng-select,ng-options,ng-repeat,发现有两点不太方便: 1.当数据复杂时,循环起来比较麻烦 2.首选项如果不设置,就会为空 整理一下它们的用法 ...

  8. HTTP协议的特点

    HTTP协议的主要特点可概括如下: 1.支持客户/服务器模式.2.简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POST.每种方法规定了客户与服务器联系的 ...

  9. 一款很不错的html转xml工具-Html Agility Pack

    之前发个一篇关于实现html转成xml的劣作<实现html转Xml>,受到不少网友的关心.该实现方法是借助htmlparser去分解html内容,然后按照dom的结构逐个生成xml字符串. ...

  10. dump_stack的简单使用 +CALL TREE

    http://blog.chinaunix.net/uid-26403844-id-3361770.html http://blog.csdn.net/zifeng274059226/article/ ...