☀【Grunt】插件

時間 2019-11-15

標籤 Grunt 插件欄目 Node.js 简体版

原文原文鏈接

Grunt Plugins
http://gruntjs.com/pluginscss

grunt-contrib-sass

sass: {
    compile: {
        files: {
            'css/core.css': ['css/core.scss']
        }
    }
}

grunt-contrib-cssmin #CSS壓縮

cssmin: {
    combine: {
        files: {
            'css/core-min.css': ['css/core.css']
        }
    }
}

cssmin: {
    with_banner: {
        options: {
            banner: '/* projA Css files by Sonic */'
        },
        files: {
            'dist/css/combo.css': ['src/css/base.css','src/css/index.css']
        }
    }
}

grunt-contrib-uglify #JS壓縮

uglify: { // jsmin
    options: {
        mangle: false
    },
    build: {
        files: {
            'dist/js/comm.js': ['src/js/comm.js']
        }
    }
},

grunt-contrib-imagemin #圖片壓縮

imagemin: {
    dist: {
        options: {
            optimizationLevel: 3
        },
        files: {
            'dist/images/photo.png': 'src/images/photo.png',
            'dist/images/badge.jpg': 'src/images/badge.jpg'
        }
    }
}

imagemin: {
    dist: {
        options: {
            optimizationLevel: 3 //定義 PNG 圖片優化水平
        },
        files: [{
            expand: true,
            cwd: 'img/',
            src: ['**/*.{png,jpg,jpeg}'], // 優化 img 目錄下全部 png/jpg/jpeg 圖片
            dest: 'img/' // 優化後的圖片保存位置，覆蓋舊圖片，而且不做提示
        }]
    }
}

grunt-contrib-csslint #CSS校驗

csslint: {
    options: {
        formatters: [
            {id: 'junit-xml', dest: 'public/stylesheets/csslint_junit.xml'},
            {id: 'csslint-xml', dest: 'public/stylesheets/csslint.xml'}
        ]
    },
    strict: {
        options: {
            import: 2
        },
        src: ['public/stylesheets/common.css']
    }
}

grunt --force

grunt-contrib-jshint #JS校驗

https://github.com/gruntjs/grunt-contrib-jshinthtml

options: {
    '-W085': true, // ignore: Don't use 'with'
    '-W004': true, // ignore: 'xxx' is already defined
    '-W116': true, // ignore: Expected '===' and instead saw '=='
    '-W033': true, // ignore: Missing semicolon
    //'-W032': true, // ignore: unnecessary semicolon
    //'-W038': true // ignore: 'xxx' used out of scope
}

function f(n) { // W004 'n' is already defined
    var n;
}

grunt-contrib-watch

watch: {
    scripts: {
        files: ['assets/css/*.less'],
        tasks: ['less']
    }
}

grunt-contrib-htmlmin

htmlmin: {
    dist: {
        options: {
            removeComments: true, // 去注析
            collapseWhitespace: true // 去換行
        },
        files: {
            'dist/html/index.html': ['src/html/index.html']
        }
    }
}

grunt-contrib-compass

compass: { // compass任務
    dist: { // 一個子任務
        options: { // 任務的設置
            sassDir: 'sass',
            cssDir: 'css',
            environment: 'production'
        }
    },
    dev: { // 另外一個子任務
        options: {
            sassDir: 'sass',
            cssDir: 'style'
        }
    }
}

grunt-contrib-concat #合併

pkg: grunt.file.readJSON('package.json'),
concat: {
    options: { //配置
        stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + //添加自定義的banner
        '<%= grunt.template.today("yyyy-mm-dd") %> */'
    },
    dist: { //任務
        src: ['src/intro.js', 'src/project.js', 'src/outro.js'], //源目錄文件
        dest: 'dist/built.js' //合併後的文件
    },
    basic_and_extras: { //另外一個任務
        files: { //另外一種更簡便的寫法
            'dist/basic.js': ['src/main.js'],
            'dist/with_extras.js': ['src/main.js', 'src/extras.js']
        }
    }
}

grunt-contrib-copy

copy: {
    main: {
        files: [
            {src: 'index.html', dest: 'dest/index.html'},
            {src: ['assets/images/**'], dest: 'dest/'},
            {src: ['assets/css/app.min.css'], dest: 'dest/'},
            {src: ['assets/js/lib/libs.min.js'], dest: 'dest/'},
            {src: ['assets/js/app.min.js'], dest: 'dest/'}
        ]
    }
}

grunt-contrib-less

less: { // 任務task 固定命名
    // 編譯
    compile: { // 目標target 隨意命名
        files: { // 文件files 固定命名
            'assets/css/main.css': 'assets/css/main.less' // dest src
        }
    },
    // 壓縮
    yuicompress: {
        files: {
            'assets/css/main-min.css': 'assets/css/main.css'
        },
        options: { // 選項options
            yuicompress: true
        }
    }
}

less: {
    dist: {
        files: {
            'assets/css/main-min.css': ['assets/css/base.less', 'assets/css/main.less']
        },
        options: {
            yuicompress: true
        }
    }
}