它们的功能一样
不同之处:gulp的速度比grunt快,grunt是通过文件的机制来压缩的,grunt是通过二进制流的方式压缩的,二进制流是计算机编码的一种,把文件转成0,1,计算机读取它比读取文件快,grunt需要下载watch组件,gulp不用
gulp安装:
安装命令环境:npm install gulp-cli -g
检测版本:gulp --version
准备文件:手动创建gulpfile.js 文件名小写
npm init 自动创建package.json
注:name不能用默认或gulp,然后一路回车,最后yes
准备本地gulp: npm install gulp -D /npm install --save-dev gulp /npm install gulp --save-dev
编写任务:a.下载模块 例:gulp-uglify 命令为:npm install gulp-uglify --save-dev
b.引入模块
c.编写任务
例:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('uglify',function(){
gulp.src('js/a.js')
.pipe(uglify())
.pipe(gulp.dest('bulid/js'));
})
gulp.task('default',['uglify'])
注:*是所有文件;**是所有文件夹
grunt:
安装grunt的命令环境:npm install grunt-cli -g
验证是否安装成功:grunt--version
准备文件:Gruntfile.js 手动创建,文件名大写
npm init 自动创建package.js
注:name不能用默认或grunt,然后一路回车,最后yes
准备本地的grunt npm install grunt -D / npm installl grunt --save-dev
准备插件:npm install grunt-contrib-uglify --save-dev 即npm install 插件名 --save-dev 或 -D
编写grunt
执行grunt:grunt 主任务 / grunt 方任务:子任务 /grunt
例:
module.exports = function (grunt) {
//1.导入咱们想要的模块
grunt.loadNpmTasks('grunt-contrib-uglify');
//配置任务
grunt.initConfig({
//主任务名:{主任务名必须和子任务名一致
//子任务名:{
//src:
//}
//}
uglify:{
a:{
src:'js/a.js',
dest:'bulid/js/a.min.js'
}
}
})
//配置默认项
grunt.registerTask('default',['uglify'])
}
常见插件:grunt-contrib-uglify 压缩js grunt-contrib-watch 监听 grunt-contrib-cssmin 压缩CSS
grunt-contrib-imagemin 压缩图片 grunt-contrib-concat 合并文件 grunt-contrib-clean 删除文件及文件夹
grunt-contrib-copy 复制文件 grunt-contrib-htmlmin 压缩html grunt-contrib-jshint 检查代码
grunt-contrib-sass 检查sass并转译 grunt-contrib-less 检查less并转译