专题截图:(注：这个截图没啥意义)
项目截图:
目录讲解：
app/ //开发目录;
c/ //开发编译完成css文件夹;
i/ //开发img文件夹;
j/ //开发js文件夹;
s/ //开发sass文件夹;
dist/ //正是发布的目录;
.../ //对应app 正式发布文件;
Gruntfile.js //grunt 的配置文件;
node_modules //node模块文件;
package.json //模块信息;
package.json 文件展示：
{
"name": "grunt-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.18.6",
"grunt": "^1.0.1",
"grunt-autoprefixer": "^3.0.4",
"grunt-browser-sync": "^2.2.0",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-imagemin": "^1.0.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-csscomb": "^3.1.1",
"grunt-curl": "^2.2.0",
"grunt-open": "^0.2.3",
"grunt-zip": "^0.17.1",
"load-grunt-tasks": "^3.5.2",
"time-grunt": "^1.4.0"
}
}
Gruntfile.js 文件展示：
module.exports = function( grunt ){
'use strict';
var config = { //配置路径;
app : 'app',
dist : 'dist'
};
grunt.initConfig({
config : config, //导入路径;
copy : { //复制;
dist : {
files: [
{
expand: true,
src: '<%= config.app %>/**.html',
dest: '<%= config.dist %>/',
flatten: true
}
]
}
},
clean : { //清楚;
dist : {
src : [ '<%= config.dist %>/**/*' ]
}
},
watch: { //监听;
files: 'app/s/**/*.scss',
tasks: ['css','js']
},
sass: { //sass;
dev: {
files: [{
expand: true,
cwd: '<%= config.app %>/s/',
src: ['*.scss'],
dest: '<%= config.app %>/c/',
ext: '.css'
}]
}
},
autoprefixer: { //添加css3前缀;
options: {
browsers: ["> 5%",'Firefox < 20','ie 6']
},
css: {
src: [
'<%= config.app %>/c/**/*.css' //将哪个 CSS 文件中的 CSS 属性添加私有前缀
]
}
},
csscomb: { //格式化css;
dev: {
expand: true,
cwd: '<%= config.app %>/c/',
src: ['*.css'],
dest: '<%= config.app %>/c/',
ext: '.css'
}
},
cssmin: {
dist: { //压缩css;
files: [{
expand: true,
cwd: '<%= config.app %>/c/',
src: ['*.css'],
dest: '<%= config.dist %>/c/',
ext: '.css'
}]
}
},
imagemin:{ //压缩img;
dist: {
options: {
optimizationLevel: 5 //定义 PNG 图片优化水平
},
files: [{
expand: true,
cwd: 'app/i',
src: ['**/*.{png,jpg,gif}'],
dest: 'dist/i'
}]
}
},
jshint: { //检测js格式;
all: ['Gruntfile.js', '<%= config.app %>/j/**/*.js']
},
uglify: { //压缩js;
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/j',
src: ['**/*.js'],
dest: '<%= config.dist %>/j'
}]
}
},
browserSync: { //浏览器同步免刷新;
dev: {
bsFiles: {
src : [
'<%= config.app %>/c/*.css',
'<%= config.app %>/j/*.js',
'<%= config.app %>/i/*.img',
'<%= config.app %>/index.html'
]
},
options: {
watchTask: true,
server: './<%= config.app %>'
}
}
},
open : { //打开页面;
all: {
path : '<%= config.dist %>/index.html'
}
},
zip: { //压缩发布文件夹;
'./time-gruntcachet.zip': ['<%= config.dist %>/**']
}
});
require('load-grunt-tasks')(grunt); //加载所有grunt插件;
require('time-grunt')(grunt); //计算grunt运行时间;
// 定义默认任务
grunt.registerTask('default', ['browserSync', 'watch']);
// 定义css任务;
grunt.registerTask('css', ['sass','autoprefixer','csscomb']);
// 定义压缩img任务;
grunt.registerTask('img', ['imagemin']);
// 定义检测js任务;
grunt.registerTask('js', ['jshint']);
// 定义压缩js任务;
grunt.registerTask('jsmin', ['jshint','uglify']);
// 定义压缩js任务;
grunt.registerTask('dist', ['clean','copy','cssmin','jsmin','img','open']);
};
使用步骤:
先决条件安装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 就跟手机还在使诺基亚的感觉一样。。。。
参考资料: