/**
 * 需要用到的文件夹有  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. MyBatis-plus 代码自动生成器

    MyBatis-plus  代码自动生成器 1.添加pom文件依赖 <!-- Mybatis-Plus 自动生成实体类--> <dependency> <groupId& ...

  2. [Git]08 如何自动补全命令

     [Git]08如何自动补全命令 如果你用的是 Bash shell,可以试试看 Git 提供的自动完成脚本.下载 Git 的源代码,进入 contrib/completion 目录,会看到一个g ...

  3. ASP.NET Core开发之HttpContext

    ASP.NET Core中的HttpContext开发,在ASP.NET开发中我们总是会经常用到HttpContext. 那么在ASP.NET Core中要如何使用HttpContext呢,下面就来具 ...

  4. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

  5. Scrollview中嵌套ListView(自定义组件解决)

    首先,ScrollView中只能放一个控件,一般都放LinearLayout,orientation属性值为vertical.在LinearLayout中放需要呈现的内容.ListView也在其中,L ...

  6. JavaScript常用的方法和函数（setAttribute和getAttribute ）

    仅记录学习的新知识和示例,无干货. 1.setAttribute和getAttribute          (Attribute:属性) setAttribute:为元素添加指定的属性,并为其赋值: ...

  7. Git相关操作及记录

    一.软件 1.下载Git客户端软件 Widows平台: https://github.com/git-for-windows/git/releases/download/v2.13.0.windows ...

  8. Visual Studio for Mac 初体验

    你喜爱的 IDE,现在可用于 Mac 来自:https://www.visualstudio.com/zh-hans/vs/visual-studio-mac/ 惊不惊喜?意不意外?惊喜但不意外,因为 ...

  9. 关于for循环的几种经典案例

    由于for循环可以通过控制循环变量的初始值和循环结束条件来改变遍历的区间,所以在排序或者遍历的时候,利用for循环就比较简单,以下是本人学习后得到的一些总结案例. 1.排序的应用 1)交换排序:通过取 ...

  10. PL/SQL Developer使用技巧以及快捷键设置

    1.类SQL PLUS窗口: File->New->Command Window,这个类似于oracle的客户端工具sql plus,但是比在cmd中的sqlplus好用多了. 2.设置关 ...