Grunt是不推荐用，可以使用gulp或者是webpack，但既然存在了，就学习下吧。
node必装，没得装
初始化
npm init -y
增加依赖
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
}
}
安装
npm install
目录
//新增一个原目录
mkdir src
新建一个demo.js
function log(str)
{
console.log(str);
}
现在需要把他这个文件输出到dest目录下
新增一个Gruntfile.js
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),//将package.json取得
uglify: {
options: {
//增加头部注释说明，使用<%%>调用
banner: '/*! <%= pkg.name%> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/demo.js',
dest: 'dest/demo.min.js'
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['uglify']);
}
执行grunt
grunt
输出dest/demo.min.js
/*! demo 2018-06-16 */
function log(a){console.log(a)}
合并输出来试试
第一种使用uglify并且压缩
Gruntfile.js
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
"my_target": {
"files": {
'dest/libs.min.js': ['src/demo.js', 'src/a.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['uglify']);
}
第二种concat插件
Gruntfile.js
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/a.js', 'src/demo.js'],
dest: 'dest/libs2.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['concat']);
}
带压缩
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/a.js', 'src/demo.js'],
dest: 'dest/libs3.js'
}
},
uglify: {
build: {
src: 'dest/libs3.js',
dest: 'dest/libs3.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['concat', 'uglify']);
}
压缩一个文件夹的所有文件
module.exports = function (grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: [{
expand: true,
cwd: 'src',
src: '**/*.js',
dest: 'dest'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
}
增加注释
options: {
banner: '/*! 注释信息 */'
},
grunt-contrib-concat
- ① separator 用于分割各个文件的文字，
- ② banner 前面说到的文件头注释信息，只会出现一次
- ③ footer 文件尾信息，只会出现一次
- ④ stripBanners去掉源代码注释信息（只会清楚/**/这种注释）
module.exports = function(grunt) {
grunt.initConfig({
concat: {
options: {
separator: '/*分割*/',
banner: '/*测试*/',
footer: '/*footer*/'
},
dist: {
src: ['src/a.js', 'src/demo.js'],
dest: 'dist/built.js',
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
}
输出
/*测试*/function a(str){
console.log(str);
};
/*分割*/function log(str){
console.log(str);
};
/*footer*/
文件分割不同地方输出
module.exports = function(grunt) {
grunt.initConfig({
concat: {
options: {
separator: '/*分割*/',
banner: '/*测试*/',
footer: '/*footer*/'
},
basic: {
src: ['src/a.js'],
dest: 'dest/a.js'
},
extras: {
src: ['src/demo.js', 'src/b.js'],
dest: 'dest/with_extras.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
}
再来分割
module.exports = function(grunt) {
grunt.initConfig({
concat: {
options: {
separator: '/*分割*/',
banner: '/*测试*/',
footer: '/*footer*/'
},
basic: {
src: ['src/a.js'],
dest: 'dest/a.js'
},
extras: {
src: ['src/demo.js', 'src/b.js'],
dest: 'dest/with_extras.js'
},
extras: {
src: ['src/c.js'],
dest: 'dest/c.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
}
换种写法
module.exports = function(grunt) {
grunt.initConfig({
concat: {
basic_and_extras: {
files: {
'dest/basic.js': ['src/a.js', 'src/demo.js'],
'dest/with_extras.js': ['src/c.js', 'src/b.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
}
grunt-contrib-requirejs
module.exports = function(grunt) {
grunt.initConfig({
requirejs: {
compile: {
"options": {
"baseUrl": "./",
"paths": {
"a": "src/a",
"b": "src/b",
"c": "src/c",
"demo": "src/demo"
},
"include": [
"a",
"b",
"c",
"demo"
],
"out": "dest/libs.js"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['requirejs']);
}
打包样式
npm install --save-dev grunt-contrib-cssmin
npm install --save-dev grunt-contrib-watch
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
compress: {
files: {
'dest/style.min.css': [
"css/style.css",
"css/style2.css"
]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin']);
}
grunt-contrib-copy复制插件
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
compress: {
files: {
'dest/style.min.css': [
"css/style.css",
"css/style2.css"
]
}
}
},
copy: {
main: {
flatten: true,
src: 'src/*.js',
dest: 'dest/'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['cssmin']);
runt.registerTask('copy', ['copy']);
}
上面会将src目录一起复制
所以你如果只是想复制文件可以加入
expand: true,
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
compress: {
files: {
'dest/style.min.css': [
"css/style.css",
"css/style2.css"
]
}
}
},
copy: {
main: {
flatten: true,
src: 'src/*.js',
expand: true,
dest: 'dest/'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['cssmin']);
runt.registerTask('copy', ['copy']);
}