grunt的用法

Posted 2020-09-22 秋水涴晴汐

以下是压缩js,css和css合并,html,img,js语法检查

　　要想实现这些，需要在命令行里下载：

　　　　js: npm install grunt-contrib-uglify --save-dev

　　　　css: npm install grunt-contrib-cssmin --save-dev

　　　　　　 npm install grunt-contrib-concat --save-dev

　　　　html: npm install grunt-contrib-htmlmin --save-dev

　　　　js语法检查： npm install grunt-contrib-jshint --save-dev

module.exports = function(grunt) {

　　//任务配置，所有插件的配置信息
　　grunt.initConfig({
　　　　// 压缩js
　　　　uglify:{
　　　　　　yasuo:{
　　　　　　　　options:{
　　　　　　　　　　mangle:false //压缩代码，参数不改变
　　　　　　　　},
　　　　　　　　expand:true,
　　　　　　　　src:"src/*.js",
　　　　　　　　dest:"dest",
　　　　　　　　rename:function (dest,src) {
　　　　　　　　　　return dest+"/"+src.replace(".js",".min.js")
　　　　　　　　}
　　　　　　}
　　　},
　　　// 压缩图片
　　　imagemin: {
　　　　dist: {
　　　　　　options: {
　　　　　　　　optimizationLevel: 3 //定义 PNG 图片优化水平
　　　　　　},
　　　　files: [{
　　　　　　expand: true,
　　　　　　cwd: ‘img/‘,
　　　　　　src: [‘*.{png,jpg,jpeg}‘], // 优化 img 目录下所有 png/jpg/jpeg 图片
　　　　　　dest: ‘image/‘ // 优化后的图片保存位置，覆盖旧图片,
　　　　　}]
　　　　}
　　},
　　// 合并压缩css
　　concat : {

　　　　css : {

　　　　　　src: [‘src/*.css‘],

　　　　　　dest:‘dest/index.css‘

　　　　}

　  },
　　cssmin: {

　　　　css: {

　　　　　　src:‘dest/index.css‘,

　　　　　　dest:‘dest/index-min.css‘

　　　　}

　　},
　　// 压缩html
　　htmlmin: {
　　　　dist: {
　　　　　　options: {
　　　　　　　　removeComments: true,
　　　　　　　　collapseWhitespace: true
　  　　　　},
　　　　files: {
　　　　　　‘dest/index.min.html‘: ‘src/index.html‘
　　　　  }
　　　　},
　　dev: {
　　　　files: {
　　　　　　‘dest/index.min.html‘: ‘src/index.html‘
　　　　}
　　　}
　　},
　　// 检查js语法
　　jshint: {
　　　　all: [
　　　　　　‘app/*.js‘
　　　　],
　　　　options: {
　　　　　　browser: true,

　　　　　　devel: true
　　　　}
　　}
});

　　　　//告诉grunt我们将使用插件
　　　　grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
　　　　grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);
　　　　grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);
　　　　grunt.loadNpmTasks(‘grunt-contrib-concat‘);
　　　　grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
　　　　grunt.loadNpmTasks(‘grunt-contrib-jshint‘);

　　　　//告诉grunt当我们在终端中输入grunt时需要做什么（注意先后顺序）
　　　　grunt.registerTask(‘default‘, [‘concat‘,‘cssmin‘,‘imagemin‘,‘uglify‘,‘htmlmin‘,‘jshint‘]);
};