/**
 * 需要用到的文件夹有  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. [编织消息框架][传输协议]stcp简单开发

    测试代码 public class ServerSTCP { static int SERVER_PORT = 3456; static int US_STREAM = 0; static int F ...

  2. 初学Log4Net

    1.Log4Net是什么?       Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等)   2.Appender      Appende ...

  3. 【WPF】学习笔记（一）——做一个简单的电子签名板

    参加实习(WPF)已经有两个多周的时间了,踩了一些坑,也算积累了一些小东西,准备慢慢拿出来分享一下.(●'◡'●) 这次呢就讲讲一个简单的电子签名板的实现. 先上张图(PS:字写得比较丑,不要太在意哈 ...

  4. PPT要你好看---读书笔记

    PPT要你好看.主要是设计的思维. 下图,对于现阶段的我来说,收获最大的是毕业答辩PPT的制作. 以及整体的PPT制作思路.

  5. 实现图片的循环滚动——JS的简单应用

    首先默认都了解JS的循环分支运算符等基本语法 用CSS实现简单的布局也是会的. 然后我们就可以来了解一下 [DOM 树节点] 它分为三大类:元素节点.文本节点.属性节点 文本节点跟属性节点为元素节点的 ...

  6. 产品经理学Python：逻辑判断与运算符

    这是关于Python的第6篇文章,主要介绍下逻辑判断与运算符. (一) 逻辑判断: 如果要实现一个复杂的功能程序,逻辑判断必不可少.逻辑判断的最基本标准:布尔类型. 布尔类型只有两个值:True和Fa ...

  7. My First GitHub

    第一次使用github 在https://github.com/注册账号. 登陆之后,首先创建一个仓库(+ new repository),开源(public)的仓库是免费的,私人(private)的 ...

  8. SQL中LEFT JOIN 和 inner join 的区别

    student表 sc 表 首先where条件a.Sid = b.Sid 查询 SELECT * FROM student a,sc b WHERE a.Sid = b.Sid GROUP BY a. ...

  9. jenkins 设置自动发送邮件

      1.测试邮件发送 进入jenkins系统管理-->系统设置做如下配置   1.设置系统管理员邮件地址,这是一个全局变量,意味着所有的jenkins执行的任务,最后都会通过这个邮件地址发送邮件 ...

  10. OC中NSFileManager

    NSFileManager介绍 NSFileManager是用来管理文件系统的 它可以用来进行常见的文件\文件夹操作(拷贝.剪切.创建等) NSFileManager使用了单例模式singleton ...