grunt基础配置
要使用grunt来管理项目,一般需要如下的几个步骤:
- 安装grunt命令行工具grunt-cli
- 在项目中安装grunt
- 安装grunt插件
- 建立并配置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‘]);};
单独运行任务参考:
其他的功能可以在此基础上逐步增加。
【sylar-20170520】
时间: 2024-10-01 08:46:25