grunt简记
2024-09-05 16:57:55
grunt和gulp都是前端自动化的工具，grunt更成熟，插件社区全、大；gulp比较年轻，性能更好，更简单容易。具体使用哪种可根据实际项目组来决定。
创建任务
grunt默认执行的是default文件
module.exports = function(grunt) {
grunt.registerTask('default',function(){
console.log('Hello Grunt');
})
}
在执行他的时候，需要给参数赋值，比如在命令行输入：grunt greet:marymei
module.exports = function(grunt) {
grunt.registerTask('greet',function(name){
console.log('Hello' +name);
})
}
处理错误,遇到错误warn默认就不继续执行了，但是可以在命令行设置grunt greet:n --force来强制执行
但是如果是fatal,那么即使使用了grunt greet:n --force他也是不向下执行的
module.exports = function(grunt) {
grunt.registerTask('greet',function(name){
if(name.length < 2) {
grunt.warn('名字太短了~');
}
grunt.log.writeln('Hello' +name);
})
}
链接多个任务：
module.exports = function(grunt) {
grunt.registerTask('greet-1',function(){
grunt.log.writeln('Hello');
});
grunt.registerTask('greet-2',function(){
grunt.log.writeln('Hola');
});
grunt.registerTask('greet-3',function(){
grunt.log.writeln('您好');
});
grunt.registerTask('greentAll',['greet-1','greet-2','greet-3']);
};
初始化：
module.exports = function(grunt) {
grunt.initConfig({
greet: {
english: 'Hello'
}
});
grunt.registerTask('greet',funtion(){
grunt.log.writeln(grunt.config.get('greet.english'));
});
};
多任务：
module.exports = function(grunt) {
grunt.initConfig({
greet: {
english: 'Hello'，
spanish:'Hola',
chinese:'您好'
}
});
grunt.registerMultiTask('greet',funtion(){
grunt.log.writeln(this.target + ':' + this.data);
});
};
文件与目录
创建目录
module.exports = function(grunt) {
grunt.registerTask('createFolders',function(){
grunt.file.mkdir('dist/stylesheets');
});
};
tree -I node_modules 命令可以查看文件目录
删除目录：
module.exports = function(grunt) {
grunt.registerTask('createFolders',function(){
grunt.file.mkdir('dist/stylesheets');
});
grunt.registerTask('clean',function(){
grunt.file.delete('dist');
});
};
显示版本
module.exports = function(grunt) {
grunt.initConfig({
pkg:grunt.file.readJSON('package.json');
});
grunt.registerTask('copyright',function(){
var content = grunt.tamplate.process('<%= pkg.name%>这个项目是由<%= pkg.author %>创建的，现在的版本<%= pkg.version %>');
grunt.file.write('copyright.txt', content);
});
};
复制文件：
module.exports = function(grunt){ grunt.loadNpmTasks('grunt-contrib-copy'); }
配置要复制的文件：
module.exports = function(grunt){
//加载复制文件的插件
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({
copy: {
html: {
src: 'index.html',
dest: 'dist/'
},
style: {
src: 'stylesheets/*.css',
dest: 'dist/'
},
js: {
src:'javascript/**/*.js'
dest:'dist/'
}
}
})
};
监听文件变化的插件：
先安装如下命令
插件：npm install grunt-contrib-watch --save-dev
module.exports = function(grunt){
//加载复制文件的插件
grunt.loadNpmTasks('grunt-contrib-copy');
//加载监听文件变化，文件发生变化执行指定的任务
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
watch: {
html:{
files: ['index.html'],
tasks:['copy.html']
}
},
copy: {
html: {
src: 'index.html',
dest: 'dist/'
},
style: {
src: 'stylesheets/*.css',
dest: 'dist/'
},
js: {
src:'javascript/**/*.js',
dest:'dist/'
}
}
})
};
插件
创建服务器：grunt-contrib-connect
配置服务器
实时刷新：livereload
编译sass：grunt-contrib-sass
编译less：grunt-contrib-less
合并文件：grunt-contrib-concat
选项：options
最小化js：grunt-contrib-uglify
最小化css：grunt-contrib-cssmin
最小化图像：grunt-contrib-imagemin
......
安装插件的命令 sudo npm install xxxx --save-dev
配置服务器:
module.exports = function(grunt){
//加载复制文件的插件
grunt.loadNpmTasks('grunt-contrib-copy');
//加载监听文件变化，文件发生变化执行指定的任务
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.initConfig({
connect:{
server:{
options: {
port:8000,
base:'dist'
}
}
},
watch: {
html:{
files: ['index.html'],
tasks:['copy.html']
}
},
copy: {
html: {
src: 'index.html',
dest: 'dist/'
},
style: {
src: 'stylesheets/*.css',
dest: 'dist/'
},
js: {
src:'javascript/**/*.js',
dest:'dist/'
}
}
})
};
最新文章
- PKG_COLLECTION_LHR 存储过程或函数返回集合类型
- 【项目】UICollectionView 对象自定
- Shtml妙用
- Swift 1.2 正式发布 - 带来很多重大改进
- Using NuGet without committing packages to source control(在没有把包包提交到代码管理器的情况下使用NuGet进行还原 )
- QUiLoader 动态加载.ui文件
- C# 基础 知识点
- bst 二叉搜索树简单实现
- Reactive Extensions
- java系统参数
- 零碎的JS基础
- 升级PyCham到2017.3后import sys模块报错的问题
- MySQL用户管理及SQL语句详解
- 016-类与对象-OC笔记
- 第48章：MongoDB-备份和恢复
- aws上ecs上tomcat8080端口打开但是无法访问
- Go Example--自定义排序
- 在平衡树的海洋中畅游（四）——FHQ Treap
- <<浪潮之巅>>阅读笔记二
- mysql \c 终止 mysql输入语句模式