首页 > 代码库 > grunt基础配置

grunt基础配置

grunt基础配置

要使用grunt来管理项目,一般需要如下的几个步骤:
  1. 安装grunt命令行工具grunt-cli
  2. 在项目中安装grunt
  3. 安装grunt插件
  4. 建立并配置Gruntfile.js

安装grunt命令行工具

npm install -g grunt-cli

在项目中安装grunt

npm install grunt --save-dev

安装完成后,可以在package.json文件中看到devDependencies中加入了grunt包

  "devDependencies": {
"grunt": "^1.0.1"
}

安装grunt常用插件

插件名
合并文件:grunt-contrib-concat
语法检查:grunt-contrib-jshint
Scss 编译:grunt-contrib-sass
压缩文件:grunt-contrib-uglify
监听文件变动:grunt-contrib-watch
建立本地服务器:grunt-contrib-connect
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

建立并配置Gruntfile.js

一个基本的压缩js文件的配置文件如下,在项目路径下运行grunt命令,即可执行压缩

  • 以下方式会将压缩文件以单独形式压缩
  • 取消ext注释,压缩文件将更改后缀为min.js
  • 注意加上expand配置(否则提示所有文件为空)
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
uglify: {
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
},
build: {
expand:true,
//set source folder
cwd: ‘public/js/custom/‘,
src: ‘*.js‘,
//set destination folder
dest: ‘public/pjt/‘,
// ext: ‘.min.js‘
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
// Default task(s).
grunt.registerTask(‘default‘, [‘uglify‘]);
};

单独运行任务参考:
http://www.cnblogs.com/artwl/p/3449303.html

其他的功能可以在此基础上逐步增加。

【sylar-20170520】

grunt基础配置