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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。