gulp常用外掛
阿新 • • 發佈:2019-02-12
本文持續更新中。。
1、gulp-less // less編譯
2、gulp-clean-css // css壓縮
.pipe(cssmin({ advanced: false,//型別:Boolean 預設:true [是否開啟高階優化(合併選擇器等)] compatibility: 'ie7',//保留ie7及以下相容寫法 型別:String 預設:''or'*' [啟用相容模式; 'ie7':IE7相容模式,'ie8':IE8相容模式,'*':IE9+相容模式] keepBreaks: true,//型別:Boolean 預設:false [是否保留換行] keepSpecialComments: '*' //保留所有特殊字首 當你用autoprefixer生成的瀏覽器字首,如果不加這個引數,有可能將會刪除你的部分字首 }))
3、gulp-uglify // js壓縮
4、gulp-imagemin //圖片壓縮
5、gulp-sourcemaps //生成sourcemap檔案.pipe(imageMin({ optimizationLevel: 4, //型別:Number 預設:3 取值範圍:0-7(優化等級) progressive: true, //型別:Boolean 預設:false 無失真壓縮jpg圖片 interlaced: true, //型別:Boolean 預設:false 隔行掃描gif進行渲染 multipass: false //型別:Boolean 預設:false 多次優化svg直到完全優化 }))
return gulp.src(paths.less) .pipe(changed(dist_paths.css)) .pipe(sourcemaps.init()) .pipe(less()) .pipe(gulp.dest('dist/css')) .pipe(cssMin()) .pipe(rename({ extname: '.min.css' })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(dist_paths.css));
6、gulp-changed // 僅僅傳遞更改過的檔案
return gulp.src(paths.html)
.pipe(changed(dist_paths.html))
.pipe(gulp.dest(dist_paths.html));
7、gulp-clean //檔案清除
gulp.task('clean', function(){
return gulp.src('./dist', {read: false})
.pipe(clean({force: true}));
});
8、gulp-connect //web伺服器
//定義livereload任務
gulp.task('connect', function () {
connect.server({
root: './',
port: 8086,
livereload: true
});
});
.pipe(connect.reload());