标签：port ruby blog pack span sprite 开始 des 不同的
npm install -g grunt-cli
npm install --save-dev grunt-contrib-copy grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), uglify: { options: { banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘ }, build: { src: ‘src/<%= pkg.name %>.js‘, dest: ‘build/<%= pkg.name %>.min.js‘ } } });
其中先写了一句 pkg: grunt.file.readJSON(‘package.json‘) 功能是读取 package.json 文件，并把里面的信息获取出来，方便在后面任务中应用（例如下面就用了 <%= pkg.name %> 来输出项目名称），这样可以提高灵活性。
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
grunt.registerTask(‘default‘, [‘uglify‘]);
（default是默认的task，当你在命令行执行grunt的时候，会执行注册在default上的任务）
grunt.registerTask(‘compress‘, [‘uglify:build‘]);
如果想要执行这个 task，我们需要在命令行输入 grunt compress 命令来执行这条 task，而这条 task 的任务是 uglify 下面的 build 任务，也就是说，我们只会执行 uglify 里面 build 定义的任务，而不会执行 uglify 里面定义的其他任务。
//wrapper函数
module.exports = function(grunt) {
//你可以像普通的js文件一样添加自己的代码
var sassStyle = ‘expanded‘;
//1.配置任务 tasks--根据插件的文档来定义任务
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
//将html和图片从src复制到build
copy: { //task
html: { //target
files: [
{ expand: true, cwd: ‘./src/html‘, src: ‘*‘, dest: ‘./build/html/‘ }
]
},
images: { //target
files: [
{ expand: true, cwd: ‘./src/images‘, src: ‘*‘, dest: ‘./build/images/‘ }
]
}
},
//合并js
concat: {
/* options: {
separator: ‘;‘,//合并分隔符
}, */
dist: {
files: { //文件路径
‘./src/js/a.all.js‘: [‘./src/js/a.1.js‘, ‘./src/js/a.2.js‘],
‘./src/js/b.all.js‘: [‘./src/js/b.1.js‘, ‘./src/js/b.2.js‘]
}
},
},
//task:编译sass
sass: {
output: { //target
options: { //target options
style: sassStyle
},
files: {
‘./build/css/style.css‘: ‘./src/scss/style.scss‘ //‘目标文件‘:‘源文件‘
}
}
},
//代码检查
jshint: {
all: [‘./src/js/a.all.js‘, ‘./src/js/b.all.js‘]
},
//压缩
uglify: {
uglifyjs: {
files: {
‘./build/js/a.min.js‘: [‘./src/js/a.all.js‘],
‘./build/js/b.min.js‘: [‘./src/js/b.all.js‘]
}
}
},
//监听
watch: {
scripts: {
files: [‘./src/js/a.1.js‘, ‘./src/js/a.2.js‘, ‘./src/js/b.1.js‘, ‘/src/js/b.2.js‘],
tasks: [‘concat‘, ‘jshint‘, ‘uglify‘]
},
sass: {
files: [‘./src/scss/style.scss‘],
tasks: [‘sass‘]
},
livereload: {
options: {
liverelload: ‘<%= connect.options.livereload %>‘
},
files: [
‘./src/html/index.html‘,
‘./src/scss/style.scss‘,
‘./src/js/a.1.js‘,
‘./src/js/a.2.js‘,
‘./src/js/b.1.js‘,
‘./src/js/b.2.js‘
]
}
},
connect: {
options: {
port: 9000,
open: true,
livareload: 35729,
//change this to ‘0.0.0.0‘ to access the server from outside
hostname: ‘localhost‘
},
server: {
options: {
port: 9001,
base: ‘./‘
}
}
}
});
//2.加载插件
grunt.loadNpmTasks(‘grunt-contrib-copy‘);
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
grunt.loadNpmTasks(‘grunt-contrib-sass‘);
grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
grunt.loadNpmTasks(‘grunt-contrib-watch‘);
grunt.loadNpmTasks(‘grunt-contrib-connect‘);
//3.注册任务
grunt.registerTask(‘copyhtml‘, [‘copy:html‘]); //可以用task：target的方法分别注册
grunt.registerTask(‘concatjs‘, [‘concat‘]); //也可以只用task名称注册，默认执行task下全部target
grunt.registerTask(‘outputcss‘, [‘sass‘]);
grunt.registerTask(‘watchit‘, [‘concat‘, ‘sass‘, ‘jshint‘, ‘uglify‘, ‘connect‘, ‘watch‘]);
grunt.registerTask(‘default‘, [‘copy‘, ‘concat‘, ‘sass‘, ‘jshint‘, ‘uglify‘]);
}
标签：port ruby blog pack span sprite 开始 des 不同的
原文地址：http://www.cnblogs.com/Nirvana-zsy/p/7507167.html
