grunt中常见的插件

时间 2019-11-14

原文原文链接

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

gulp是一种自动化构建工具，能够加强咱们的工做流程，他是基于 Node.js 构建的，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数css

    //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"]);