1. 程式人生 > >gulp常用外掛

gulp常用外掛

本文持續更新中。。

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 //圖片壓縮

.pipe(imageMin({
            optimizationLevel: 4, //型別:Number  預設:3  取值範圍:0-7(優化等級)
            progressive: true, //型別:Boolean 預設:false 無失真壓縮jpg圖片
            interlaced: true, //型別:Boolean 預設:false 隔行掃描gif進行渲染
            multipass: false //型別:Boolean 預設:false 多次優化svg直到完全優化
        }))
5、gulp-sourcemaps //生成sourcemap檔案
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());