Grunt配置及使用
时间:2022-05-06
本文章向大家介绍Grunt配置及使用,主要内容包括1、node环境安装、2、grunt安装、Gruntfile.js文件、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
1、node环境安装
2、grunt安装
package.json文件
{
"name": "payment",
"version": "0.0.1",
"author": "zhangxu",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-htmlmin": "^2.4.0",
"grunt-contrib-imagemin": "^2.0.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-less": "^1.4.1",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^3.3.0",
"grunt-contrib-watch": "^1.0.0"
},
"dependencies": {
"express": "^4.16.2"
}
}
Gruntfile.js文件
module.exports = function (grunt) {
grunt.initConfig({
//初始化一个配置对象
pkg: grunt.file.readJSON('package.json'),
//采用imagemin压缩图片
imagemin: {
images: {
expand: true,
src: 'images/*.{jpg,png}',
dest: 'dist/'
},
libWeuiImages: {
expand: true,
src: 'lib/weui/images/*.{jpg,png}',
dest: 'dist/'
}
},
//js语法检查
jshint: {
options: {
reporterOutput: ''
},
all: ['js/*.js']
},
// js合并
concat: {
dist: {
src: ['./src/plugin.js', './src/plugin2.js'],
dest: './global.js',
}
},
//采用UglifyJS压缩js
uglify: {
js: {
expand: true,
cwd: 'js',
src: '*.js',
dest: 'dist/js/'
},
libCryptoJs: {
expand: true,
cwd: 'lib/crypto-js',
src: '*.js',
dest: 'dist/lib/crypto-js/'
},
libJquery: {
expand: true,
cwd: 'lib/jquery',
src: '*.js',
dest: 'dist/lib/jquery/'
},
libWechat: {
expand: true,
cwd: 'lib/wechat',
src: '*.js',
dest: 'dist/lib/wechat/'
},
libWeui: {
expand: true,
cwd: 'lib/weui',
src: '*.js',
dest: 'dist/lib/weui/'
}
},
//采用less压缩css
less: {
options: {
compress: true,
cleancss: true, // 压缩css文件
yuicompress: false
},
css: {
expand: true,
cwd: 'css',
src: '*.css',
dest: 'dist/css'
},
libWeui: {
expand: true,
cwd: 'lib/weui',
src: '*.css',
dest: 'dist/lib/weui'
}
},
//压缩html
htmlmin: {
payment: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true,
cwd: '',
src: ['wxjump.html', 'html/[a-z]{1,}*.html', 'html/contract/[a-z]{1,}*.html'],
dest: 'dist/',
extDot: 'first'
}]
}
},
//复制文件
copy: {
html: {
src: 'home.html',
dest: 'dist/'
},
html2: {
src: 'html/*.html',
dest: 'dist/'
},
htmlContract: {
src: 'html/contract/*.html',
dest: 'dist/'
},
html3: {
src: 'wxjump.html',
dest: 'dist/'
},
},
//监视文件变化
watch: {
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'css/*.css',
'html/*.html',
'html/contract/*.html',
'js/*.js'
]
}
},
//测试服务地址
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: '192.168.16.120'
},
server: {
options: {
port: 9001,
base: './'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.registerTask('default', []);
//全项目:上生产用
grunt.registerTask('payment', ['imagemin', 'jshint', 'uglify', 'less', 'htmlmin']);
//图片文件
grunt.registerTask('1', ['imagemin']);
//脚本文件
grunt.registerTask('2', ['jshint', 'uglify']);
//样式文件
grunt.registerTask('3', ['less']);
//页面文件
grunt.registerTask('4', ['htmlmin']);
//开发
grunt.registerTask('development', ['connect', 'watch']);
//js脚本检查
grunt.registerTask('jscheck', ['jshint']);
};
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法