Gruntfile.js檔案配置項

標籤：dex   全域   comm   other   依賴   name   type   att   load   

GRUNT安裝與配置

Posted on 2016-08-19 18:13 聽風吹來的種子 閱讀(47) 評論(0) 編輯 收藏

安裝 CLI

npm install -g grunt-cli//全域安裝npm init //初始化package.json

 

npm init   命令會建立一個基本的 package.json檔案。

123	npm install grunt --save-dev npm install grunt-contrib-jshint --save-dev

　　

.......//安裝你需要的依賴

安裝完以後在package.json的同級建立一個Gruntfile.js設定檔

配置如下

  1 module.exports = function(grunt) {  2 var timestamp = new Date().getTime();  3 grunt.initConfig({  4 pkg: grunt.file.readJSON(‘package.json‘),  5 //檔案合并  6 concat: {  7 options: {  8 //定義一個用於插入合并輸出檔案之間的字元  9 seperator: ‘;‘ 10 }, 11 build: { 12 //將要合并的檔案 13 // src:[‘src/**/*.js‘], 14 //合并後的js檔案的存放位置 15 // dest:[‘build/<%= pkg.name %>.js‘] 16 files: { // Dictionary of files  17 ‘dist/css/main.css‘: [‘src/**/*.css‘, ‘!src/**/*.min.css‘], 18 ‘dist/js/index.js‘: ‘src/**/*.js‘ 19 //‘src/sass/all.scss‘:‘src/sass/*.scss‘ 20 } 21 }, 22 concatsass: { 23 files: { 24 ‘src/sass/all.scss‘: ‘src/sass/*.scss‘ 25 } 26 } 27 }, 28 //壓縮js 29 uglify: { 30 options: { 31 banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘ 32 }, 33 /*dist:{ 34 files:{ 35 ‘dist/<%= pkg.name %>.min.js‘:[‘<%= concat.dist.dest %>‘] 36 } 37 }*/ 38 build: { 39 src: ‘dist/js/index.js‘, 40 dest: ‘dist/js/index.min.js‘ 41 } 42 }, 43 //壓縮html 44 htmlmin: { 45  46 options: { // Target options  47 removeComments: true, 48 removeCommentsFromCDATA: true 49 // collapseWhitespace: true, 50 // minifyCSS:true 51 // collapseBooleanAttributes: true, 52 // removeAttributeQuotes: true, 53 // removeRedundantAttributes: true, 54 // useShortDoctype: true, 55 // removeEmptyAttributes: true, 56 // removeOptionalTags: true 57 }, 58 html: { 59 files: [{ // Dictionary of files 60 expand: true, 61 cwd: ‘dist‘, 62 src: [‘**/*.html‘], 63 dest: ‘dist‘ //‘destination‘:‘source‘ 64 }] 65 } 66 }, 67 //js的文法檢測 68 jshint: { 69 files: [‘Gruntfile.js‘, ‘src/**/*.js‘, ‘test/**/*.js‘, ‘!src/**/*.min.js‘], 70 options: { 71 //這裡是覆蓋JSHint預設配置的選項 72 globals: { 73 jQuery: true, 74 console: true, 75 module: true, 76 document: true 77 } 78 } 79 }, 80 //css壓縮 81 cssmin: { 82 options: { 83 //shorthandCompactiong:false, 84 roundingPercision: -1 //這個屬性應該是將樣式相同的都提取出來 85 }, 86 build: { 87 files: { 88 // ‘dist/css/main.css‘: ‘dist/css/main.css‘ 89 } 90 } 91 }, 92 // 93 // qunit:{ 94 // files:[‘test/**/*.html‘] 95 // }, 96 //監聽事件 97 watch: { 98 build: { 99 files: [‘<%= jshint.files %>‘, ‘src/**/*.css‘],100 tasks: [‘jshint‘, ‘qunit‘],101 options: { spawn: false }102 }103 104 },105 //處理html中css、js 引入合并問題106 usemin: {107 html: ‘dist/**/*.html‘,108 options: {109 blockReplacements: {110 js: function(block) {111 return ‘<script type="text/javascript" src="‘ + block.dest + ‘?t=‘ + timestamp + ‘"></script>‘;112 },113 css: function(block) {114 return ‘<link rel="stylesheet" type="text/css" href="‘ + block.dest + ‘?t=‘ + timestamp + ‘"/>‘;115 }116 }117 }118 },119 //120 121 //copy122 copy: {123 src: {124 files: [125 { expand: true, cwd: ‘src‘, src: [‘**/*.html‘], dest: ‘dist‘ }, //設定的相對於哪個路徑找檔案就是cwd的值，這裡我寫的html在test檔案裡，所以設定成test;所有的源檔案路徑，都是相對於cwd126 //dist 目標路徑127 { expand: true, cwd: ‘src/css‘, src: [‘*.min.css‘], dest: ‘dist/css‘ },128 { expand: true, cwd: ‘src/js‘, src: [‘*.min.js‘], dest: ‘dist/js‘ }129 ]130 },131 image: {132 files: [133 { expand: true, cwd: ‘src‘, src: [‘images/**/*.{png,jpg,jpeg,gif}‘], dest: ‘dist‘ }134 ]135 },136 robots: {137 files: [138 { expand: true, cwd: ‘src‘, src: [‘robots.txt‘], dest: ‘dist‘ }139 ]140 }141 },142 //圖片壓縮143 imagemin: {144 static: { // Target 145 options: { // Target options 146 optimizationLevel: 3,147 svgoPlugins: [{ removeViewBox: false }],148 use: []149 },150 files: { // Dictionary of files 151 // ‘dist/img.png‘: ‘src/img.png‘, // ‘destination‘: ‘source‘ 152 // ‘dist/img.jpg‘: ‘src/img.jpg‘,153 // ‘dist/img.gif‘: ‘src/img.gif‘154 }155 },156 dynamic: { // Another target 157 files: [{158 expand: true, // Enable dynamic expansion 159 cwd: ‘src/‘, // Src matches are relative to this path 160 src: [‘**/*.{png,jpg,gif}‘], // Actual patterns to match 161 dest: ‘dist‘ // Destination path prefix 162 }]163 }164 },165 //requirejs 打包166 requirejs: {167 options: {168 baseUrl: ‘‘,169 paths: {170 "$": ‘src/zepto‘,171 "_": ‘src/underscore‘,172 "B": ‘src/backbone‘173 },174 include: [‘$‘, ‘_‘, ‘B‘],175 176 out: ‘dist/libs.js‘ //會將include裡面的檔案打包為out對應的檔案，paths的本身意義不大，就是用於配置include裡面的指向177 }178 },179 //sprite 雪碧圖 //grunt-spritesmith180 sprite: {181 options: {182 //追加時間戳記，預設不追加183 spritestamp: true184 },185 //image-set 樣本186 all: {187 src: ‘src/images/*.jpg‘,188 dest: ‘dist/images/spritesheet.png‘,189 destCss: ‘dist/css/sprites.css‘190 }191 },192 sass: {193 dist: {194 // src:‘src/**/*.scss‘,195 // dest:‘dist/css/compiled.css‘196 options: { // Target options 197 style: ‘expanded‘198 },199 files: {200 ‘src/css/all.css‘: ‘src/sass/all.scss‘201 }202 }203 204 },205 //清理檔案206 clean: {207 html: [‘dist/**/*.html‘],208 sass: [‘src/sass/all.scss‘],209 css: [‘dist/css/*.css‘],210 js: [‘dist/js/*.js‘],211 images: [‘dist/images/**/*.{png,jpg,jpeg,gif}‘]212 },213 //合并 html214 includereplace: {215 dist: {216 files: [217 { src: [‘**/*.html‘], dest: ‘dist‘, expand: true, cwd: ‘src‘ }218 ]219 }220 }221 222 });223 224 //載入包含"uglify" 任務的外掛程式225 grunt.loadNpmTasks(‘grunt-contrib-uglify‘);226 grunt.loadNpmTasks(‘grunt-contrib-copy‘);227 grunt.loadNpmTasks(‘grunt-contrib-jshint‘);228 //grunt.loadNpmTasks(‘grunt-contrib-qunit‘);229 grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);230 grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);231 grunt.loadNpmTasks(‘grunt-contrib-watch‘);232 grunt.loadNpmTasks(‘grunt-contrib-concat‘);233 grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);234 grunt.loadNpmTasks(‘grunt-usemin‘);235 grunt.loadNpmTasks(‘grunt-contrib-requirejs‘);236 grunt.loadNpmTasks(‘grunt-spritesmith‘);237 grunt.loadNpmTasks(‘grunt-contrib-sass‘);238 grunt.loadNpmTasks(‘grunt-contrib-clean‘);239 grunt.loadNpmTasks(‘grunt-include-replace‘);240 241 //預設被執行的工作清單242 //grunt.registerTask(‘dev‘,[‘clean‘,‘copy‘,‘concat‘,‘sass‘,‘uglify‘,‘copy‘,‘usemin‘,‘htmlmin‘]);243 grunt.registerTask(‘dev‘, [‘clean‘, ‘jshint‘, ‘copy‘, ‘concat:concatsass‘, ‘sass‘, ‘concat:build‘, ‘uglify‘, ‘includereplace‘, ‘usemin‘]);244 grunt.registerTask(‘dist‘, [‘clean‘, ‘jshint‘, ‘copy‘, ‘concat:concatsass‘, ‘sass‘, ‘concat:build‘, ‘uglify‘, ‘cssmin‘, ‘includereplace‘, ‘usemin‘]);245 };

Gruntfile.js檔案配置項