码迷,mamicode.com
首页 > 其他好文 > 详细

grunt 使用记录

时间:2014-11-28 14:10:08      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   使用   sp   

grunt -- 项目构建工具

package.json

{
  "name": "app",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-concat": "~0.5.0",
    "grunt-contrib-cssmin": "~0.10.0",
    "grunt-contrib-uglify": "~0.6.0",
    "grunt-contrib-imagemin": "~0.9.2",
    "grunt-contrib-htmlmin": "~0.3.0"
  }
}

 

Gruntfile.js

module.exports = function (grunt) {

    // grunt config
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),

        jshint: {            
            files: [‘src/js/base.js‘, ‘src/js/script.js‘, ‘src/js/caculate.js‘]
        },

        concat: {
            options: {
                banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘,
                separator: ‘\n/*---------分割线---------*/\n‘
            },
            css: {
                files: [{
                    src: [‘src/css/base.css‘, ‘src/css/style.css‘, ‘src/svg/style.css‘],
                    dest: ‘dist/css/<%= pkg.name %>.css‘
                }]
            },
            js: {
                files: [{
                    src: [‘src/js/base.js‘, ‘src/js/script.js‘, ‘src/j/caculate.js‘],
                    dest: ‘dist/js/<%= pkg.name %>.js‘
                }]
            }
        },

        cssmin: {
            css: {
                files: [{
                    src: ‘dist/css/<%= pkg.name %>.css‘,
                    dest: ‘dist/css/<%= pkg.name %>.min.css‘
                }]
            }
        },

        uglify: {
            js: {
                files: [{
                    src: ‘dist/js/<%= pkg.name %>.js‘,
                    dest: ‘dist/js/<%= pkg.name %>.min.js‘
                }]
            }
        },

        htmlmin: {
            options: {
                removeComments:true,
                collapseWhitespace:true
            },
            dist: {
                files: [{
                    expand: true,       // all html
                    cwd: ‘src/‘,
                    src: [‘**/*.html‘],
                    dest: ‘dist‘
                }]
            }
        },

        imagemin: {
            img: {
                files: [{
                    expand: true,        // all images
                    cwd: ‘src/‘,
                    src: [‘**/*.{png,jpg,gif}‘],
                    dest: ‘dist/‘
                }]
            }
        }
    });

    // load task
    grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
    grunt.loadNpmTasks(‘grunt-contrib-concat‘);
    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
    grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);
    grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);

    // regist task
    grunt.registerTask(‘default‘, [‘jshint‘, ‘concat‘, ‘cssmin‘, ‘uglify‘]);
    grunt.registerTask(‘html‘, [‘htmlmin‘]);
    grunt.registerTask(‘img‘, [‘imagemin‘]);
};

 

grunt 使用记录

标签:des   style   blog   http   io   ar   color   使用   sp   

原文地址:http://www.cnblogs.com/xiankui/p/4128305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!