它們的功能一樣
不同之處：gulp的速度比grunt快,grunt是通過(guò)文件的機(jī)制來(lái)壓縮的，grunt是通過(guò)二進(jìn)制流的方式壓縮的读恃，二進(jìn)制流是計(jì)算機(jī)編碼的一種，把文件轉(zhuǎn)成0，1握玛，計(jì)算機(jī)讀取它比讀取文件快够傍，grunt需要下載watch組件，gulp不用
gulp安裝：
安裝命令環(huán)境：npm install gulp-cli -g
檢測(cè)版本：gulp --version
準(zhǔn)備文件：手動(dòng)創(chuàng)建gulpfile.js ?文件名小寫
? ? ? ? ? ? ? ? ?npm init 自動(dòng)創(chuàng)建package.json
注：name不能用默認(rèn)或gulp挠铲，然后一路回車冕屯，最后yes
準(zhǔn)備本地gulp:? ? npm install gulp -D /npm install --save-dev gulp /npm install gulp --save-dev?
編寫任務(wù)：a.下載模塊 例：gulp-uglify ?命令為：npm install gulp-uglify --save-dev
b.引入模塊
c.編寫任務(wù)
例：
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的命令環(huán)境：npm install grunt-cli -g
驗(yàn)證是否安裝成功：grunt--version
準(zhǔn)備文件：Gruntfile.js ?手動(dòng)創(chuàng)建,文件名大寫
? ? ? ? ? ? ? ? ? npm init ?自動(dòng)創(chuàng)建package.js
注：name不能用默認(rèn)或grunt拂苹，然后一路回車安聘，最后yes
準(zhǔn)備本地的grunt ? npm install grunt -D / npm installl grunt --save-dev
準(zhǔn)備插件：npm install grunt-contrib-uglify --save-dev 即npm install 插件名 --save-dev 或 -D
編寫grunt
執(zhí)行g(shù)runt：grunt 主任務(wù) / grunt 方任務(wù):子任務(wù) /grunt
例：
module.exports = function (grunt) {
//1.導(dǎo)入咱們想要的模塊
grunt.loadNpmTasks('grunt-contrib-uglify');
//配置任務(wù)
grunt.initConfig({
//主任務(wù)名:{主任務(wù)名必須和子任務(wù)名一致
//子任務(wù)名:{
//src:
//}
//}
uglify:{
a:{
src:'js/a.js',
dest:'bulid/js/a.min.js'
}
}
})
//配置默認(rèn)項(xiàng)
grunt.registerTask('default',['uglify'])
}
常見(jiàn)插件：grunt-contrib-uglify 壓縮js ? ?grunt-contrib-watch ?監(jiān)聽(tīng) ? grunt-contrib-cssmin 壓縮CSS
grunt-contrib-imagemin 壓縮圖片 ? grunt-contrib-concat 合并文件 ?grunt-contrib-clean 刪除文件及文件夾
grunt-contrib-copy 復(fù)制文件 ? grunt-contrib-htmlmin 壓縮html ?grunt-contrib-jshint 檢查代碼
grunt-contrib-sass 檢查sass并轉(zhuǎn)譯 ?grunt-contrib-less 檢查less并轉(zhuǎn)譯
