/**
 * 需要用到的文件夹有  js(src)  css image html
 */

gulp是一种自动化构建工具，可以增强我们的工作流程，他是基于 Node.js 构建的，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数


    //1.引入  js的压缩 npm install grunt-contrib-uglify --save-dev
    grunt.loadNpmTasks("grunt-contrib-uglify");
    //css的压缩  npm install grunt-contrib-cssmin --save-dev
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    //image的压缩  npm install grunt-contrib-imagemin --save-dev
    // var mozjpeg = require('imagemin-mozjpeg');
    //压缩html
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    //压缩js
    grunt.loadNpmTasks('grunt-contrib-jshint');
    //合并css文件
    grunt.loadNpmTasks('grunt-contrib-concat');
    //2.实时监听
    grunt.loadNpmTasks('grunt-contrib-watch');
    //2.设置任务
    grunt.initConfig({
        //js的压缩任务  src->dest
        uglify:{
            yasuo:{
                options:{
                    mangle:false  //参数不被破坏
                },
                expand:true,
                cwd:"js",
                src:"*.js",//你要压缩文件的路径
                dest:"newJs",//压缩后创建的目录名称
                rename:function (newJs,js) {
                    return newJs+"/"+js.replace(".js",".min.js");
                }
            }
        },
        //css的压缩任务 css->newCss
        cssmin: {
            target: {
                files: [{
                    expand: true,
                    cwd: 'css', //你要压缩的文件路径
                    src: '*.css',
                    dest: 'new/css',
                    ext: '.min.css'
                }]
            }
        },
        // css的合并   release->allCss
        concat: {//css文件合并
            css: {
                src: ['new/css/*.min.css'],//当前grunt项目中路径下的src/css目录下的所有css文件
                dest: 'new/css/allCss/all.min.css'  //生成到grunt项目路径下的allcss文件夹下为all.css
            }
        }，
        //image的压缩  image->img
             imagemin: {
            dynamic: {
                expand: true,
                cwd: 'image',
                src: '*.{png,jpg,jpeg,gif,webp,svg}',
                dest: 'new/img'
            }
        },
        htmlmin: {
            options: {
                removeComments: true,//清除html中注释的部分
                removeCommentsFromCDATA: true,
                collapseWhitespace: true,//清空空格
                collapseBooleanAttributes: true,//省略布尔值属性的值
                removeAttributeQuotes: true,
                removeRedundantAttributes: true,//清空所有的空属性
                removeEmptyAttributes: true,//清除所有LINK标签上的type属性
                removeOptionalTags: true  //是否清除<html></html>和<body></body>标签
            },
            yasuo2: {
                expand: true,
                cwd: 'html',
                src: '*.html',
                dest: 'new/view',
                rename:function(view,html){
                    return view+'/'+html.replace('.html','.min.html');
                }
            }
        },
        //检查js语法
        jshint:{
            all: [
                'js/*.js'
            ],
            options: {
                browser: true,
                devel: true
            }
        },
　　　　//监听
        watch:{
            a:{
                files:['js/*js','css/*css','new/css/*css','html/*.html','src/img/*.{jpg,png,gif}'],
                tasks:['uglify','concat','cssmin','htmlmin','imagemin']
            }
        }
    });
    //图片的压缩
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    //设置默认任务  多任务用数组形式来进行传送
    grunt.registerTask("default",["uglify","cssmin","concat","imagemin","htmlmin","jshint","watch"]);

grunt中常见的插件的更多相关文章

  1. 在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件

    在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件 开源程序 浏览:29555 2013年05月02日 文章目录[隐藏] 常见的工作流程 SFTP 安装和使用方法 第一步: ...

  2. ios开发——错误总结篇&开发中常见错误和警告总结（四）

    ios开发——开发总结&开发中常见错误和警告总结(四) 网易彩票实战总结(错误) 错误总结之类的实现 经典错误之重复定义与导入错误 经典错误关于父类的实现 通知对象: 控制器的定义 Xcode ...

  3. Eclipse中安装MemoryAnalyzer插件及使用

    Eclipse中安装MemoryAnalyzer插件 一.简介 Eclipse作为JAVA非常好用的一款IDE,其自带的可扩展插件非常有利于JAVA程序员的工作效率提升. MemoryAnalyzer ...

  4. Unity项目开发过程中常见的问题，你遇到过吗？

    最近看到有朋友问一个unity游戏开发团队,需要掌握哪些知识之类的问题.事实上Unity引擎是一个很灵活的引擎,根据团队开发游戏类型的不同,对人员的要求也有差异,所以不能一概而论.但是,一些在Unit ...

  5. 在Bootstrap开发框架中使用bootstrap-datepicker插件

    在基于Boostrap的Web开发中,往往需要录入日期内容,基于Boostrap的插件中,关于日期的录入可以使用bootstrap-datepicker这个非常不错的插件,以替代默认的type=dat ...

  6. Ionic2中使用第三方插件极光推送

    不同于Ionic1中插件的调用,Ionic2提供了Ionic Native.Ionic Native封装了一些常见的插件(如:Camera.Barcode Scanner等),这些插件的使用方式在官方 ...

  7. Spring中常见的bean创建异常

    Spring中常见的bean创建异常 1. 概述     本次我们将讨论在spring中BeanFactory创建bean实例时经常遇到的异常 org.springframework.beans.fa ...

  8. web网页中使用vlc插件播放相机rtsp流视频

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...

  9. Eclipse中的checkstyle插件

    一.Checkstyle工具 Checkstyle是一款检查Java程序源代码样式的工具,它可以有效的帮助我们检视代码以便更好的遵循代码编写标准. 官方地址:http://checkstyle.sou ...

随机推荐

  1. hadoop2.8和spark2.1完全分布式搭建

    一.前期准备工作: 1.安装包的准备: VMware(10.0版本以上) : 官方网站:https://www.vmware.com/cn.html 官方下载地址:http://www.vmware. ...

  2. 揭秘Kafka高性能架构之道 - Kafka设计解析（六）

    原创文章,同步首发自作者个人博客.转载请务必在文章开头处以超链接形式注明出处http://www.jasongj.com/kafka/high_throughput/ 摘要 上一篇文章<Kafk ...

  3. WEB认证模式：Basic & Digest

    一. HTTP Basic 客户端以" : "连接用户名和密码后,再经BASE64加密通过Authorization请求头发送该密文至服务端进行验证,每次请求都需要重复发送该密文. ...

  4. [CTSC1999]【网络流24题】星际转移

    Description 由于人类对自然资源的消耗,人们意识到大约在2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177 年冬由于未知的原因,地 ...

  5. openfire+smack 实现即时通讯基本框架

    smack jar下载地址 http://www.igniterealtime.org/downloads/download-landing.jsp?file=smack/smack_3_2_2.zi ...

  6. maven命令更新子父项目的pom版本

    Q:一个maven项目,有多个子module,在顶级父pom.xml里设置<version>1.0.0-SHAPSHOT</version>,在子pom.xml里都用了 < ...

  7. （转）详解JS位置、宽高属性之一：offset系列

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  8. iOS 发布证书提示 此证书的签发者无效 解决办法

    1. 打开钥匙串  查看发布证书 都是提示 此证书的签发者无效   解决办法 : 2. 到了 第 4 步骤 再去 查看 发布证书 就会 显示  此证书有效 3.  如果还不可以 就 把 Apple W ...

  9. redis连接池的使用方法

    所需jar:jedis-2.8.0.jar和commons-pool-2-2.3jar Jedis操作步骤如下:1->获取Jedis实例需要从JedisPool中获取:2->用完Jedis ...

  10. Zookeeper ZAB 协议分析

    前言 ZAB 协议是为分布式协调服务 ZooKeeper 专门设计的一种支持崩溃恢复的原子广播协议.在 ZooKeeper 中,主要依赖 ZAB 协议来实现分布式数据一致性,基于该协议,ZooKeep ...