gulp常用外掛程式及方法

2021-08-15 04:59:33 字數 1884 閱讀 7772

常用的幾個外掛程式

gulp-uglify

//(js壓縮)

gulp-minify

-css

//(css壓縮)

gulp-minify

-html

//(html壓縮)

gulp-concat

//(檔案合併)

gulp-less

//(編譯less)

gulp-sass

//(編譯sass)

gulp-imagemin

//(壓縮)

gulp-livereload

//(自動重新整理)

gulp-rename

//(重新命名)

方法

//引入需要的外掛程式

var gulp = require('gulp'),

uglify = require('gulp-uglify'),

minify = require('gulp-minify-css'),

htmlmini = require('gulp-minify-html'),

concat = require("gulp-concat"),

less = require("gulp-less"),

sass = require("gulp-sass"),

imagemin = require('gulp-imagemin'),

livereload = require('gulp-livereload'),

rename = require("gulp-rename");

建立任務

js壓縮

gulp.task('minjs', function

() )) //重新命名 會在輸出的檔案名字後面加.min

.pipe(gulp.dest('dest/js')); //輸出檔案

});//注: ' !' 為排除模式;

css壓縮

gulp.task('cssmin', function

() ))

.pipe(gulp.dest('dest/css'));

});

html壓縮

gulp.task('htmlmin', function

() )

檔案合併

gulp.task('concat', function

() );

注:按順序合併檔案 gulp.src(['js/demo1.js','js/demo2.js','js/demo2.js']);

less編譯

gulp.task('lesstran', function

() );

sass編譯

gulp.task('sasstran', function

() );

壓縮

gulp.task('imgmin', function

()')

.pipe

(imagemin())

.pipe

(gulp.dest('./dest/img'))

});

監聽

gulp.task('watch', function

() );

gulp預設執行任務

gulp.task('default',,function

());

以上僅為一些簡單常用的gulp任務

gulp常用外掛程式

本人就職於一家網際網路小公司,根據自己的專案紀錄一下常用的gulp外掛程式,專案不是很大!文章目錄 1.gulp load plugins 2.yargs 3.del 4.gulp filter 5.gulp header 6.run sequence 7.gulp uglify 8.gulp mi...

gulp常用外掛程式整理

1.gulp sass sass編譯 3.gulp autoprefixer 新增css3字首 4.gulp clean css 壓縮css 5.gulp include 檔案包含 6.gulp concat 檔案合併 7.del 檔案刪除 8.gulp uglify 壓縮js 9.gulp.spr...

gulp常用的外掛程式

首先,來了解下gulp的大概使用流程 首先通過 gulp.src 方法獲取到我們想要處理的檔案流,然後把檔案流通過pipe方法匯入到gulp的外掛程式中,最後把經過外掛程式處理後的流再通過pipe方法匯入到 gulp.dest 中,gulp.dest 方法則把流中的內容寫入到檔案中,這裡首先需要弄清...