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

grunt项目构建

时间:2014-10-29 18:53:55      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   color   os   ar   sp   

最近想把项目里添加grunt,说白了就是前端自动化管理,具体配置如下:

用到以下几个部件:

grunt-contrib-cssmin

grunt-contrib-uglify

grunt-contrib-jshint

grunt-contrib-imagemin

这几个应该是最常用的几个部件,用于我们页面需要后台部署,所以没有用html压缩。

过几天会把文件合并部件加上,减少http请求。再找一下有没有图片合并的部件,百度的F.I.S就整合了图片合并的部件。

 

干货。。。

Gruntfile.js

module.exports = function (grunt) {

    // 构建任务配置
    grunt.initConfig({

        //读取package.json的内容,形成个json数据
        pkg: grunt.file.readJSON(‘package.json‘),

        jshint: {
            all: [‘Gruntfile.js‘, ‘js/allChose.js‘, ‘js/header.js‘, ‘js/index.js‘, ‘register.js‘, ‘table.js‘]
        },
        //压缩js
        uglify: {
            //文件头部输出信息
            options: {
                banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: ‘js/‘,
                        src: ‘*.js‘,
                        dest: ‘dest/js‘
                    }
                ]
            }
        },

        //压缩css
        cssmin: {
            //文件头部输出信息
            options: {
                banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘,
                //美化代码
                beautify: {
                    //中文ascii化,非常有用!防止中文乱码的神配置
                    ascii_only: true
                }
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: ‘style/‘,
                        src: ‘*.css‘,
                        dest: ‘dest/css‘
                    }
                ]
            }
        },

        //图片优化
        imagemin: {
            dist: {
                files: [
                    {
                        expand: true,
                        //相对路径
                        cwd: ‘style/image‘,
                        src: [‘*.{gif,jpg,png}‘],
                        dest: ‘dest/img‘

                    }
                ]
            }
        }
    });

    // 加载指定插件任务
    grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
    grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);

    // 默认执行的任务
    grunt.registerTask(‘default‘, [‘jshint‘, ‘uglify‘, ‘cssmin‘, ‘imagemin‘]);

};

 

package.json

{
  "name": "zhfw",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-cssmin": "~0.10.0",
    "grunt-contrib-uglify": "~0.6.0",
    "grunt-contrib-imagemin": "0.9.1",
    "grunt-contrib-jshint": "0.10.0"
  }
}

 

grunt项目构建

标签:des   style   blog   http   io   color   os   ar   sp   

原文地址:http://www.cnblogs.com/qzsonline/p/4059983.html

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