/**
 * 需要用到的文件夹有  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. [ext4]磁盘布局 - group分析

    ext4文件系统的磁盘布局是先把磁盘分成一个个相同大小的block块(每个block块的大小默认是4K),然后把这些block块合成一个个group. group大小最大为256M(默认为256M), ...

  2. python2与python3的不兼容_urllib2

    网页下载器:将URL对应的网页以HTML下载到本地,用于后续分析 常见网页下载器:Python官方基础模块:urllib2 第三方功能包:requests python 3.x中urllib库和uri ...

  3. 简介vsftpd及搭建配置

    一.简介 FTP(文件传输协议)全称是:Very Secure FTP Server.   Vsftpd是linux类操作系统上运行的ftp服务器软件. vsftp提供三种登陆方式:1.匿名登录  2 ...

  4. 写具有良好风格的ABAP代码

    编程风格是一个经久不衰的话题,大家所公认的事实是:一个良好的编程风格会带来很多的好处.而对于“良好”的标准,则众说纷纭,莫衷一是.编程风格在ABAP程序中当然也有着重要的意义,因为很少看到专门针对AB ...

  5. C#基础知识-流程控制的应用（四）

    流程控制我们在编程中运用到的地方非常的多,在上篇中仅仅只是简单的介绍每一种的使用,并没有运用到实例中,很难去理解它真正的作用.下面我们将实际的运用流程控制的代码写一些实例相关的程序,加深对流程控制的理 ...

  6. 初识Celery

    本系列文章的开发环境: window + python2. + pycharm5 + celery3.1.25 + django1.9.4 在我们日常的开发工作中,经常会遇到这几种情况: 1.在web ...

  7. Linux下链接数据库图形化工具

    (一).Linux环境下mysql的安装.SQL操作 Linux下安装MySQL (rmp --help) 基本步骤:上传软件->检查当前Linux环境是否已经安装,如发现系统自带的,先卸载-& ...

  8. java内存模型1

    并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体).通信是指线程之间以何种机制来交换信息.在命令式编程中,线程之间的通信 ...

  9. MyBatis之级联——一对一关系

    在学数据库概论的时候会听到这么几个词:数据库的关系分为一对一.一对多.多对多.对于在学校里学的知识已经忘得差不多了,在这里简单的提一下数据库的关系.此篇是介绍MyBatis是如何实现数据库中一对一关系 ...

  10. 关于微信分享JSSDK使用需注意的几点问题

    微信公众平台技术文档中有微信JS-SDK说明文档,详情见地址https://mp.weixin.qq.com/wiki 官方给出了使用步骤和DEMO,下面说一下几点需要注意的问题. 1.登录微信公众平 ...