在Javascript的 开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具,可以帮助我们自动管理和运行各种任务。
sudo npm install grunt-cli -g
//grunt-cli表示安装的是grunt的命令行界面,参数g表示全局安装。
npm install
//这种方法是针对已有package.json的情况
npm init
//如果想要自动生成package.json文件,可以使用npm init命令,按照屏幕提示回答所需模块的名称和版本即可。
npm install <module> --save-dev
//已有的package.json文件不包括Grunt模块,可以在直接安装Grunt模块的时候,加上–save-dev参数,该模块就会自动被加入package.json文件。
以下是同时监控sass和js 实例
package.json
{
"name": "common.min",
"title": "js files",
"version": "0.0.0",
"copyright": "2015",
"devDependencies": {
"grunt": "*",
"grunt-contrib-sass": "*",
"grunt-contrib-jshint": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-watch": "*",
"grunt-contrib-concat": "*"
}
}
实例gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Metadata.
meta: {
basePath: '',
srcPath: '../sass/',
deployPath: '../css/'
},
concat: {
js: {
src: ['src/**/*.js'],
dest: '<%= pkg.name %>.js'
}
},
sass: {
dist: {
files: {
'<%= meta.deployPath %>common.css': '<%= meta.srcPath %>common.scss'
},
options: {
style: 'compact'
}
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
build: {
src: '<%=pkg.name %>.js',
dest: '<%= pkg.name %>.js'
}
},
// jshint: {
// options: {
// eqeqeq:false,
// trailing:false
// },
// files: ['Gruntfile.js', 'src/**/*.js']
// },
watch: {
scripts: {
files: ['<%= meta.srcPath %>/**/*.scss', '**/*.js'],
tasks: ['sass', 'concat', 'uglify'],
options: {
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
//grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
//grunt.registerTask('check', ['jshint']);
grunt.registerTask('default', ['sass', 'concat', 'uglify', 'watch']);
};