专题截图:(注：这个截图没啥意义)
项目截图:
目录讲解：
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
整个项目要用到的grunt插件就安装完成了
4、编写完Gruntfile.js,在cmd 启动实时刷新浏览器
$ grunt
5、开发完成之后 发布到正是文件夹
$ grunt dist
6、最后压缩打包发给后端;
$ grunt zip
也就是：
后记：
这是我16年上半年做的专题；
不过现在感觉用grunt 就跟手机还在使诺基亚的感觉一样。。。。
参考资料:
:
：