☀【Grunt】插件

Grunt Plugins
http://gruntjs.com/plugins

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-jshint

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

        }

    }

}

 

grunt-contrib-connect

为文件建立站点，实现通过浏览器访问文件的功能

http://localhost:9001/src/html/index.html

grunt-regarde

监控哪些文件发生变化，当变化发生时，执行设定的任务

grunt-contrib-livereload

建立web socket服务器，让页面同web socket通行