Grunt 实战

时间：2017-01-29 14:38:25 阅读：344 评论：0 收藏：0 [点我收藏+]

专题截图:(注：这个截图没啥意义)

技术分享

项目截图:

技术分享

目录讲解：

app/ //开发目录;

　　c/ //开发编译完成css文件夹;

　　i/ //开发img文件夹;

　　j/ //开发js文件夹;

　 s/ //开发sass文件夹;

dist/ //正是发布的目录;

　　.../ //对应app 正式发布文件;

Gruntfile.js //grunt 的配置文件;

node_modules //node模块文件;

package.json //模块信息;

package.json 文件展示：

 1 {
 2   "name": "grunt-test",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "author": "",
10   "license": "ISC",
11   "devDependencies": {
12     "browser-sync": "^2.18.6",
13     "grunt": "^1.0.1",
14     "grunt-autoprefixer": "^3.0.4",
15     "grunt-browser-sync": "^2.2.0",
16     "grunt-contrib-clean": "^1.0.0",
17     "grunt-contrib-copy": "^1.0.0",
18     "grunt-contrib-cssmin": "^1.0.2",
19     "grunt-contrib-imagemin": "^1.0.1",
20     "grunt-contrib-jshint": "^1.1.0",
21     "grunt-contrib-sass": "^1.0.0",
22     "grunt-contrib-uglify": "^2.0.0",
23     "grunt-contrib-watch": "^1.0.0",
24     "grunt-csscomb": "^3.1.1",
25     "grunt-curl": "^2.2.0",
26     "grunt-open": "^0.2.3",
27     "grunt-zip": "^0.17.1",
28     "load-grunt-tasks": "^3.5.2",
29     "time-grunt": "^1.4.0"
30   }
31 }

Gruntfile.js 文件展示：

  1 module.exports = function( grunt ){
  2 
  3     ‘use strict‘;
  4 
  5     var config = {             //配置路径;
  6             app  : ‘app‘,
  7             dist : ‘dist‘
  8         };
  9 
 10     grunt.initConfig({
 11         config : config,    //导入路径;
 12 
 13         copy : {            //复制;
 14             dist : {
 15                 files: [
 16                     {
 17                         expand: true,
 18                         src: ‘<%= config.app %>/**.html‘,
 19                         dest: ‘<%= config.dist %>/‘,
 20                         flatten: true
 21                     }
 22                 ]
 23             }
 24         },
 25         clean : {            //清楚;
 26             dist : {
 27                 src  : [ ‘<%= config.dist %>/**/*‘ ]
 28             }
 29         },
 30         watch: {            //监听;
 31             files: ‘app/s/**/*.scss‘,
 32             tasks: [‘css‘,‘js‘]
 33         },
 34         sass: {                //sass;
 35             dev: {
 36                 files: [{
 37                   expand: true,
 38                   cwd: ‘<%= config.app %>/s/‘,
 39                   src: [‘*.scss‘],
 40                   dest: ‘<%= config.app %>/c/‘,
 41                   ext: ‘.css‘
 42                 }]
 43             }
 44         },
 45         autoprefixer: {     //添加css3前缀;
 46             options: {
 47               browsers: ["> 5%",‘Firefox < 20‘,‘ie 6‘]
 48             },
 49             css: {
 50                 src: [
 51                   ‘<%= config.app %>/c/**/*.css‘  //将哪个 CSS 文件中的 CSS 属性添加私有前缀
 52                 ]
 53             }
 54         },
 55         csscomb: {             //格式化css;
 56             dev: {
 57                 expand: true,
 58                 cwd: ‘<%= config.app %>/c/‘,
 59                 src: [‘*.css‘],
 60                 dest: ‘<%= config.app %>/c/‘,
 61                 ext: ‘.css‘
 62             }
 63         },
 64         cssmin: {            
 65           dist: {            //压缩css;
 66             files: [{
 67               expand: true,
 68               cwd: ‘<%= config.app %>/c/‘,
 69               src: [‘*.css‘],
 70               dest: ‘<%= config.dist %>/c/‘,
 71               ext: ‘.css‘
 72             }]
 73           }
 74         },
 75         imagemin:{             //压缩img;        
 76             dist: {                          
 77               options: {                       
 78                 optimizationLevel: 5         //定义 PNG 图片优化水平
 79               },
 80               files: [{
 81                 expand: true,                   
 82                 cwd: ‘app/i‘,                    
 83                 src: [‘**/*.{png,jpg,gif}‘],    
 84                 dest: ‘dist/i‘                   
 85               }]
 86             }
 87         },
 88         jshint: {              //检测js格式;    
 89             all: [‘Gruntfile.js‘, ‘<%= config.app %>/j/**/*.js‘]
 90         },
 91         uglify: {              //压缩js;    
 92             dist: {
 93               files: [{
 94                 expand: true,                   
 95                 cwd: ‘<%= config.app %>/j‘,                    
 96                 src: [‘**/*.js‘],    
 97                 dest: ‘<%= config.dist %>/j‘                   
 98               }]
 99             }
100         },
101         browserSync: {          //浏览器同步免刷新;    
102             dev: {
103                 bsFiles: {
104                     src : [
105                         ‘<%= config.app %>/c/*.css‘,
106                         ‘<%= config.app %>/j/*.js‘,
107                         ‘<%= config.app %>/i/*.img‘,
108                         ‘<%= config.app %>/index.html‘
109                     ]
110                 },
111                 options: {
112                     watchTask: true,
113                     server: ‘./<%= config.app %>‘
114                 }
115             }
116         },
117         open : {             //打开页面;
118             all: {
119                 path : ‘<%= config.dist %>/index.html‘
120               }
121         },    
122         zip: {                //压缩发布文件夹;            
123           ‘./time-gruntcachet.zip‘: [‘<%= config.dist %>/**‘]
124         }
125 
126     });
127 
128     require(‘load-grunt-tasks‘)(grunt);    //加载所有grunt插件;
129     require(‘time-grunt‘)(grunt);        //计算grunt运行时间;
130 
131     // 定义默认任务
132     grunt.registerTask(‘default‘, [‘browserSync‘, ‘watch‘]);
133     // 定义css任务;
134     grunt.registerTask(‘css‘, [‘sass‘,‘autoprefixer‘,‘csscomb‘]);
135     // 定义压缩img任务;
136     grunt.registerTask(‘img‘, [‘imagemin‘]);
137     // 定义检测js任务;
138     grunt.registerTask(‘js‘, [‘jshint‘]);
139     // 定义压缩js任务;
140     grunt.registerTask(‘jsmin‘, [‘jshint‘,‘uglify‘]);
141     // 定义压缩js任务;
142     grunt.registerTask(‘dist‘, [‘clean‘,‘copy‘,‘cssmin‘,‘jsmin‘,‘img‘,‘open‘]);
143     
144 };

使用步骤:

先决条件安装node.js

1、在 cmd 输入框建立package.json文件信息　　

$ npm init

技术分享

信息基本基本回车就行;

2、在cmd 全局安装grunt-cli

$ npm install -g grunt-cli

技术分享

3、在cmd 安装grunt插件

$ npm install grunt browser-sync grunt-autoprefixer 
grunt-browser-sync grunt-contrib-clean grunt-contrib-copy 
grunt-contrib-cssmin grunt-contrib-imagemin 
grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify 
grunt-contrib-watch grunt-csscomb grunt-curl grunt-open 
grunt-zip load-grunt-tasks time-grunt  --save-dev

技术分享