首页 > 代码库 > grunt项目构建
grunt项目构建
最近想把项目里添加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项目构建
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。