我是靠谱客的博主 大方冬日,这篇文章主要介绍grunt基本 使用grunt,现在分享给大家,希望可以做个参考。

grunt

npm

npminit npm install 安装

grunt是JavaScript世界项目的构建工具

重点1.package.json不存在时

命令:npm init可自动创建package.json文件

重点2.package.json存在时

直接命令:npm install 或者 npm install –save-dev会自动将package.json中的模块安装到node-modules文件夹下

安装grunt

npm install grunt –save-dev
使用中国节点,淘宝镜像
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装grunt
$ cnpm install grunt –save-dev

安装grunt-cli工具

$ cnpm install grunt-cli -g

grunt-spritesmith 制作精灵图

安装grunt-spritesmith
$ cnpm install grunt-spritesmith –save-dev

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
sprite: { all: { src: ['public/images/*.png', '!public/images/banner.png', '!public/images/bannerPhone.jpg'], dest: 'public/images/spritesheet.png', destCss: 'public/css/sprites.css' } } ``` ### grunt-contrib-cssmin 压缩css ```js cnpm install grunt-contrib-cssmin --save-dev cssmin: { target: { files: [{ expand: true, cwd: 'public/css', src: ['*.css', '!*.min.css'], dest: 'public/css', ext: '.min.css' }] } } <div class="se-preview-section-delimiter"></div>

grunt-contrib-imagemin 压缩图片

cnpm install grunt-contrib-imagemin –save-dev

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
imagemin: { release: { files: [{ expand: true, src: ['public/images/spritesheet.png', 'public/images/banner.png', 'public/images/bannerPhone.jpg'] }], options: [{ optimizationLevel: 3, }] } }, <div class="se-preview-section-delimiter"></div>

grunt-contrib-htmlmin 压缩html

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
htmlmin: { // Task dist: { // Target options: { // Target options removeComments: true, collapseWhitespace: true }, files: { // Dictionary of files 'contact.html': 'index.html' } }, } <div class="se-preview-section-delimiter"></div>

grunt-contrib-uglify 压缩js

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
uglify: { my_target: { files: { 'public/uglify.min.js': ['public/js/jquery-3.2.1.js'] } } } <div class="se-preview-section-delimiter"></div>

grunt-contrib-concat 链接js或者css

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
concat: { js: { file: { 'build/js/bundle.js': ['public/js/jquery-3.2.1.js', 'public/js/bootstrap.js'] } }, css: { file: { 'build/js/final.min.css': ['public/css/*.min.css'] } } } <div class="se-preview-section-delimiter"></div>

grunt-contrib-jshint 检查代码错误

复制代码
1
2
3
4
5
6
7
jshint: ['public/js/jquery-3.2.1.js'], <div class="se-preview-section-delimiter"></div>

grunt-contrib-less less生成css

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
less: { compile: { files: { 'public/css/complied.css': 'public/css/*.less' } } } <div class="se-preview-section-delimiter"></div>

grunt-contrib-watch 监听

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
watch: { less: { tasks: ['less:compile'], files: ['public/css/*.less'] } } <div class="se-preview-section-delimiter"></div>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
module.exports = function(grunt) { grunt.initConfig({ sprite: { all: { src: ['public/images/*.png', '!public/images/banner.png', '!public/images/bannerPhone.jpg'], dest: 'public/images/spritesheet.png', destCss: 'public/css/sprites.css' } }, cssmin: { target: { files: [{ expand: true, cwd: 'public/css', src: ['*.css', '!*.min.css'], dest: 'public/css', ext: '.min.css' }] } }, imagemin: { release: [{ expand: true, src: ['public/images/spritesheet.png', 'public/images/banner.png', 'public/images/bannerPhone.jpg'] }], option: { optimzation: 3 } } }); grunt.loadNpmTasks('grunt-spritesmith'); grunt.loadNpmTasks('grunt-contrib-cssmin'); }

最后

以上就是大方冬日最近收集整理的关于grunt基本 使用grunt的全部内容,更多相关grunt基本内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(120)

评论列表共有 0 条评论

立即
投稿
返回
顶部