/**
 * 需要用到的文件夹有  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. 推送一个已有的代码到新的 gerrit 服务器

    1.指定项目代码库中迭代列出全部ProductList(.git)到pro.log文件中 repo forall -c 'echo $REPO_PROJECT' | tee pro.log pro.l ...

  2. Block Token 原理分析

    介绍 文件权限检查由NameNode执行,而不是DataNode执行. 默认情况下,任何客户端都可以访问只有其块ID的任何块. 为了解决这个问题,Hadoop引入了块访问令牌的概念. 块访问令牌由Na ...

  3. [Git]04 如何使用标签

     Git也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做. 本节我们一起来学习如何如何新建标签,列出所有可用的标签,以及各种不同类型标签之间的差 ...

  4. PHP die() 函数

    die() 函数输出一条消息,并退出当前脚本. 该函数是 exit() 函数的别名.

  5. Java基础语法(一)<注释，关键字，常量，变量，数据类型，标识符，数据类型转换>

    从今天开始,记录学习Java的过程.要学习Java首先得有环境,至于环境的安装我就不说了,百度有很多教程,比如:http://jingyan.baidu.com/article/20095761904 ...

  6. NGINX中的proxy_pass和rewrite

    文章作者:luxianghao 文章来源:http://www.cnblogs.com/luxianghao/p/6807081.html 转载请注明,谢谢合作. 免责声明:文章内容仅代表个人观点,如 ...

  7. Web常见约定规范（精选）

    常见的约定规范 (一)HTML约定规范 1,html属性顺序:id class name data-xxx (src for type href)(title alt)(aria-xxx role) ...

  8. Docker - 容器互联

    容器互联 通过docker run命令的--link参数可以让容器之间通过连接(linking)系统进行交互. 参数格式:--link name:alias ,name是要链接的容器名称, alias ...

  9. ⑤JS返回格式化的当前时间和上周时间

    首先对时间进行格式化 返回上周时间和当前时间

  10. jQuery选择器---基本选择器总结

    今天要跟大家分享一下jQuery选择器的使用方法,它的选择器分为四大类 如图: 基本选择器的使用: 1.id选择器 案例: <div id="notMe"><p& ...