前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Grunt配置及使用

Grunt配置及使用

原创
作者头像
meteorzx
发布2018-03-28 14:54:16
1.4K18
发布2018-03-28 14:54:16
举报
文章被收录于专栏:meteorzxmeteorzx

1、node环境安装

2、grunt安装

package.json文件

代码语言:javascript
复制
{
  "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文件

代码语言:javascript
复制
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']);
};

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、node环境安装
  • 2、grunt安装
    • package.json文件
      • Gruntfile.js文件
      相关产品与服务
      测试服务
      测试服务 WeTest 包括标准兼容测试、专家兼容测试、手游安全测试、远程调试等多款产品,服务于海量腾讯精品游戏,涵盖兼容测试、压力测试、性能测试、安全测试、远程调试等多个方向,立体化安全防护体系,保卫您的信息安全。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档