Grunt配置及使用

原创

meteorzx

发布于 2018-03-28 06:54:16

1.5K00

代码可运行

文章被收录于专栏：meteorzxmeteorzx

运行总次数：0

代码可运行

1、node环境安装

http://www.runoob.com/nodejs/nodejs-install-setup.html

2、grunt安装

package.json文件

http://blog.csdn.net/zmrdlb/article/details/53190696

{
  "name": "payment",
  "version": "0.0.1",
  "author": "zhangxu",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-htmlmin": "^2.4.0",
    "grunt-contrib-imagemin": "^2.0.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-less": "^1.4.1",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-uglify": "^3.3.0",
    "grunt-contrib-watch": "^1.0.0"
  },
  "dependencies": {
    "express": "^4.16.2"
  }
}

Gruntfile.js文件

module.exports = function (grunt) {

    grunt.initConfig({
        //初始化一个配置对象
        pkg: grunt.file.readJSON('package.json'),
        //采用imagemin压缩图片
        imagemin: {
            images: {
                expand: true,
                src: 'images/*.{jpg,png}',
                dest: 'dist/'
            },
            libWeuiImages: {
                expand: true,
                src: 'lib/weui/images/*.{jpg,png}',
                dest: 'dist/'
            }
        },
        //js语法检查
        jshint: {
            options: {
                reporterOutput: ''
            },
            all: ['js/*.js']
        },
        // js合并
        concat: {
            dist: {
                src: ['./src/plugin.js', './src/plugin2.js'],
                dest: './global.js',
            }
        },
        //采用UglifyJS压缩js
        uglify: {
            js: {
                expand: true,
                cwd: 'js',
                src: '*.js',
                dest: 'dist/js/'
            },
            libCryptoJs: {
                expand: true,
                cwd: 'lib/crypto-js',
                src: '*.js',
                dest: 'dist/lib/crypto-js/'
            },
            libJquery: {
                expand: true,
                cwd: 'lib/jquery',
                src: '*.js',
                dest: 'dist/lib/jquery/'
            },
            libWechat: {
                expand: true,
                cwd: 'lib/wechat',
                src: '*.js',
                dest: 'dist/lib/wechat/'
            },
            libWeui: {
                expand: true,
                cwd: 'lib/weui',
                src: '*.js',
                dest: 'dist/lib/weui/'
            }
        },

        //采用less压缩css
        less: {
            options: {
                compress: true,
                cleancss: true,     // 压缩css文件
                yuicompress: false
            },
            css: {
                expand: true,
                cwd: 'css',
                src: '*.css',
                dest: 'dist/css'
            },
            libWeui: {
                expand: true,
                cwd: 'lib/weui',
                src: '*.css',
                dest: 'dist/lib/weui'
            }
        },
        
        //压缩html
        htmlmin: {
            payment: {
                options: {
                    removeComments: true,
                    collapseWhitespace: true
                },
                files: [{
                    expand: true,
                    cwd: '',
                    src: ['wxjump.html', 'html/[a-z]{1,}*.html', 'html/contract/[a-z]{1,}*.html'],
                    dest: 'dist/',
                    extDot: 'first'
                }]
            }
        },
        
        //复制文件
        copy: {
            html: {
                src: 'home.html',
                dest: 'dist/'
            },
            html2: {
                src: 'html/*.html',
                dest: 'dist/'
            },
            htmlContract: {
                src: 'html/contract/*.html',
                dest: 'dist/'
            },
            html3: {
                src: 'wxjump.html',
                dest: 'dist/'
            },
        },
        
        //监视文件变化
        watch: {
            livereload: {
                options: {
                    livereload: '<%= connect.options.livereload %>'
                },
                files: [
                    'css/*.css',
                    'html/*.html',
                    'html/contract/*.html',
                    'js/*.js'
                ]
            }
        },
        //测试服务地址
        connect: {
            options: {
                port: 9000,
                open: true,
                livereload: 35729,
                // Change this to '0.0.0.0' to access the server from outside
                hostname: '192.168.16.120'
            },
            server: {
                options: {
                    port: 9001,
                    base: './'
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');

    grunt.registerTask('default', []);
    //全项目:上生产用
    grunt.registerTask('payment', ['imagemin', 'jshint', 'uglify', 'less', 'htmlmin']);
    //图片文件
    grunt.registerTask('1', ['imagemin']);
    //脚本文件
    grunt.registerTask('2', ['jshint', 'uglify']);
    //样式文件
    grunt.registerTask('3', ['less']);
    //页面文件
    grunt.registerTask('4', ['htmlmin']);
    //开发
    grunt.registerTask('development', ['connect', 'watch']);
    //js脚本检查
    grunt.registerTask('jscheck', ['jshint']);
};