grunt学习一

时间:2023-03-09 16:33:26
grunt学习一

grunt是前端自动化工具之一。下面是是grunt的简单小示例:

在使用grunt,确保安装nodejs,如果不清楚,可以百度找相关教程,这个教程已经烂大街了。

1.打开cmd,以管理员的身份。(或者使用编辑器自带的终端或控制器(其实也cmd)。这里我使用git shell)

2.安装grunt

npm install -g grunt-cli

和安装node_modules:

npm init //初始化

npm install //安装node模块

3. 新建项目目录,在src创建一个test.js,test.js的内容,你随便输入一点

grunt学习一

4. 安装插件

npm install grunt --save-dev

npm install grunt-contrib-uglify --sava-dev

npm install grunt-contrib-cssmin --save-dev

...

检测pakeage.json中devDependecies的变化

grunt学习一

5.新建package.json和Gruntfile.js。

package.json这个是node基础知识,不多数。Gruntfile.js是执行grunt的配置文件。

源码:

'use strict'; //使用ecma的严格模式
//包函数
module.exports = function (grunt) {
//task config,所有插件的配置信息
grunt.initConfig({
//获取apckage.json的信息
pkg: grunt.file.readJSON('package.json'),
//uglify config
uglify: { //uglify 是丑化的意思,压缩的js变怎么样,变丑了吧,这就是这个插件的由来
options: {
stripBanner: true,
banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/test.js',
dest: 'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
} },
});
//tell terminal to load and use uglify plugs
grunt.loadNpmTasks('grunt-contrib-uglify');
// tell terminal to do something
/*
* first param is initConfig's default task
* second param is array,the element of array is plugName
* */
grunt.registerTask('default', ['uglify']);
}

首先我们使用的严格模式‘usestrict’,然后引入grunt的node模块。

grunt.initConfig({})//初始配置

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('defautl',['uglify']);

6.运行

grunt

7. 查看build文件夹下的压缩的js