Grunt 實戰

時間 2019-11-08

標籤 grunt 實戰欄目 Node.js 简体版

原文原文鏈接

專題截圖:(注：這個截圖沒啥意義)javascript

項目截圖:css

目錄講解：html

app/ //開發目錄;java

　　c/ //開發編譯完成css文件夾;node

　　i/ //開發img文件夾;css3

　　j/ //開發js文件夾;npm

　 s/ //開發sass文件夾;json

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

一、在 cmd 輸入框創建package.json文件信息　　

$ npm init

信息基本基本回車就行;

二、在cmd 全局安裝grunt-cli

$ npm install -g grunt-cli

三、在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

整個項目要用到的grunt插件就安裝完成了

四、編寫完Gruntfile.js,在cmd 啓動實時刷新瀏覽器