gulp 經常使用插件彙總

時間  2019-11-11
標籤 gulp 經常 使用 插件 彙總 欄目 JavaScript 简体版
原文   原文鏈接

2017-07-26更新：圖片壓縮插件使用gulp-smushit，gulp-smushit壓縮率比較大，gulp-imagemin 圖片壓縮插件壓縮率不明顯。
css

 見下圖壓縮率：html

 

 

一、gulp安裝node

參照gulp官網進行安裝：http://www.gulpjs.com.cn/docs/getting-started/git

二、經常使用的插件github

gulp全部插件地址：http://gulpjs.com/plugins/web

（1）html壓縮插件npm

插件地址：https://www.npmjs.com/package/gulp-htmlmin/gulp

（2）sass編譯插件數組

插件地址：https://www.npmjs.com/package/gulp-sass/瀏覽器

注意如今是執行2個任務了，同時注意配置好路徑。

（3） 圖片壓縮插件

gulp-imagemin插件地址：https://www.npmjs.com/package/gulp-imagemin/

gulp-smushit插件地址：https://www.npmjs.com/package/gulp-smushit/

（4）css壓縮插件

插件地址：https://www.npmjs.com/package/gulp-clean-css/

任務配置示例：

 

//css壓縮任務
gulp.task('cssmin', function() {
    //過濾掉.min.css文件
    gulp.src(['./css/*.css', '!./css/*.min.css'])
        .pipe(cleanCSS({
            //'ie8'：IE8+兼容模式，
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./dist/css'));
});

 （5）JS壓縮插件gulp-uglify

插件地址：https://www.npmjs.com/package/gulp-uglify/

任務配置示例：

//JS壓縮任務
gulp.task('jsmin', function() {
    //過濾掉.min.js文件
    gulp.src(['./js/*.js','!./js/*.min.js'])
        .pipe(uglify({
            //支持IE8
            ie8: true
        }))
        .pipe(gulp.dest('./dist/js'));
});

 

（6）雪碧圖插件gulp-css-spriter

插件地址：https://www.npmjs.com/package/gulp-css-spriter/

在css中只須要這樣寫便可：

body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform: translate(100px,100px);
}
.a{
    width: 71px;
    height: 93px;
    background: url(../img/sqbg-icon.png) no-repeat center;
}
.b{
    width: 960px;
    height: 417px;
    background: url(../img/ceshi3.png) no-repeat center;
}

生成後的CSS爲：

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform: translate(100px,100px);
}

.a {
    width: 71px;
    height: 93px;
    background: url(../img/spritesheet.png) no-repeat center;
    background-position: -0px -417px;
}

.b {
    width: 960px;
    height: 417px;
    background: url(../img/spritesheet.png) no-repeat center;
    background-position: -0px -0px;
}

自動將圖片路徑更換爲雪碧圖的spritesheet.png的路徑，同時自動添加上了background-position。

另外：若不想頁面中全部的png都合併爲雪碧圖，能夠將只想合併的圖片後添加?__spriter

示例代碼：

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform: translate(100px, 100px);
}

.a {
    width: 71px;
    height: 93px;
    background: url(../img/sqbg-icon.png?__spriter) no-repeat center;
}

.b {
    width: 960px;
    height: 417px;
    background: url(../img/ceshi3.png) no-repeat center;
}

.c {
    width: 960px;
    height: 417px;
    background: url(../img/product4.png?__spriter) no-repeat center;
}

生成後的css代碼爲：

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform: translate(100px, 100px);
}

.a {
    width: 71px;
    height: 93px;
    background: url(../img/spritesheet.png) no-repeat center;
    background-position: -0px -417px;
}

.b {
    width: 960px;
    height: 417px;
    background: url(../img/ceshi3.png) no-repeat center;
}

.c {
    width: 960px;
    height: 417px;
    background: url(../img/spritesheet.png) no-repeat center;
    background-position: -0px -0px;
}

實現以上情景須要作的是修改\node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js 這個文件的40行開始的if--else if代碼塊爲：

// background-image always has a url 且判斷url是否有?__spriter後綴

        if(transformedDeclaration.property === 'background-image' && /\?__spriter/i.test(transformedDeclaration.value)) {

            transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter', '');
            return cb(transformedDeclaration, declarationIndex, declarations);
        }
        // Background is a shorthand property so make sure `url()` is in there 且判斷url是否有?__spriter後綴
        else if(transformedDeclaration.property === 'background' && /\?__spriter/i.test(transformedDeclaration.value)) {

            transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter', '');
            var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);

            if(hasImageValue) {
                return cb(transformedDeclaration, declarationIndex, declarations);
            }
        }

以下截圖：

 

 

（7）JS代碼檢查插件gulp-jshint

插件地址：https://www.npmjs.com/package/gulp-jshint/

同時安裝jshint-stylish插件，插件地址：https://www.npmjs.com/package/tslint-stylish/

錯誤和警告輸出爲一下形式：

 （8）重命名插件gulp-rename

插件地址：https://www.npmjs.com/package/gulp-rename/

 配置文件示例：

gulp.task('jsmin', function() {
    //過濾掉.min.js文件
    gulp.src(['./js/*.js', '!./js/*.min.js'])
        .pipe(uglify({
            //支持IE8
            ie8: true
        }))
        //修改擴展名
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./dist/js'));
});

 （8）資源、模塊複用插件gulp-file-include

插件地址：https://www.npmjs.com/package/gulp-file-include

（9）自動添加前綴gulp-autoprefixer

插件地址：https://www.npmjs.com/package/gulp-autoprefixer

 

 

以上插件組合後的總體配置文件（包含命令的順序執行），在命令行中直接輸入gulp執行便可： 

 

var gulp = require('gulp');
//HTML壓縮插件
var htmlmin = require('gulp-htmlmin');
//SASS編譯插件
var sass = require('gulp-sass');
//圖片壓縮插件
var imagemin = require('gulp-imagemin');
//PNG壓縮插件
var imageminPngquant = require('imagemin-pngquant');
//CSS壓縮插件
var cleanCSS = require('gulp-clean-css');
//雪碧圖合併插件
var spriter = require('gulp-css-spriter');
//js壓縮插件
var uglify = require('gulp-uglify');
//添加前綴插件
var autoprefixer = require('gulp-autoprefixer');
//圖片壓縮插件
var smushit = require('gulp-smushit');
//js校驗插件
var jshint = require('gulp-jshint');
//重命名插件
var rename = require("gulp-rename");
//圖片壓縮中減小重複壓縮
var cache = require('gulp-cache');
//模板複用
var fileinclude = require('gulp-file-include');

//html壓縮任務
gulp.task('html', function() {
    return gulp.src('./*.html')
        //資源複用插件
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        //html壓縮插件
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('./dist'))
});

//sass編譯任務--包括scss編譯、雪碧圖合併、添加前綴、壓縮和重命名任務
gulp.task('sass', function() {
    return gulp.src('./css/*.scss')
        .pipe(sass().on('error', sass.logError))
        //雪碧圖合併
        .pipe(spriter({
            //這是雪碧合成的圖
            'spriteSheet': './dist/img/scssSpriteSheet.png',
            //css引用的圖片路徑
            'pathToSpriteSheetFromCSS': '../img/scssSpriteSheet.png'
        }))
        //添加前綴
        .pipe(autoprefixer({
            //瀏覽器市場佔有率參考：https://mtj.baidu.com/data/mobile/device 以及http://tongji.baidu.com/data/browser
            //配置參考：https://github.com/postcss/autoprefixer
            browsers: ['> 1%', 'ie >= 8', 'Android >= 4.1', 'iOS >= 7.0'],
            //是否美化屬性值 默認：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            cascade: false
        }))
        //css壓縮
        .pipe(cleanCSS({
            //'ie8'：IE8+兼容模式，
            compatibility: 'ie8'
        }))
        //修改擴展名
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css'));
});

//監控文件任務
gulp.task('watch', function() {
    //監控 scss 文件，若是有修改，則執行 sass 任務
    gulp.watch('./css/*.scss', ['sass']);
    //監控 js 文件，若是有修改，則執行 scripts 任務
    gulp.watch('./js/*.js', ['scripts']);
    //監控 css 文件，若是有修改，則執行 css 任務
    gulp.watch('./css/*.css', ['css']);
    //監控 圖片 文件，若是有修改，則執行 imagemin 任務
    gulp.watch('./img/*.{jpg,png}', ['imagemin']);
    //監控 圖片 文件，若是有修改，則執行 imagemin 任務
    gulp.watch('./*.html', ['html']);

});

//圖片壓縮任務--使用gulp-imagemin插件
//gulp.task('imagemin', function() {
//    gulp.src('./img/*')
//        .pipe(imagemin({
//            progressive: true,
//            svgoPlugins: [{
//                removeViewBox: false
//            }], //不要移除svg的viewbox屬性
//            use: [imageminPngquant()] //使用pngquant深度壓縮png圖片的imagemin插件
//        }))
//        .pipe(gulp.dest('dist/img'))
//});

//更改壓縮插件使用gulp-smushit
gulp.task('imagemin', function() {
    return gulp.src('./img/*.{jpg,png}')
        .pipe(cache(smushit({
            //顯示壓縮率
            verbose: true
        })))
        .pipe(gulp.dest('dist/img'));
});

//css任務--雪碧圖合併、添加前綴、壓縮、重命名
gulp.task('css', function() {
    //過濾掉.min.css文件
    return gulp.src(['./css/*.css', '!./css/*.min.css'])
        //雪碧圖合併
        .pipe(spriter({
            //這是雪碧合成的圖
            'spriteSheet': './dist/img/spritesheet.png',
            //css引用的圖片路徑
            'pathToSpriteSheetFromCSS': '../img/spritesheet.png'
        }))
        //添加前綴
        .pipe(autoprefixer({
            //瀏覽器市場佔有率參考：https://mtj.baidu.com/data/mobile/device 以及http://tongji.baidu.com/data/browser
            //配置參考：https://github.com/postcss/autoprefixer
            browsers: ['> 1%', 'ie >= 8', 'Android >= 4.1', 'iOS >= 7.0'],
            //是否美化屬性值 默認：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            cascade: false
        }))
        //css壓縮
        .pipe(cleanCSS({
            //'ie8'：IE8+兼容模式，
            compatibility: 'ie8'
        }))
        //修改擴展名
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css'));
});

//scripts任務--包含壓縮和重命名
gulp.task('scripts', function() {
    //過濾掉.min.js文件
    return gulp.src(['./js/*.js', '!./js/*.min.js'])
        .pipe(uglify({
            //支持IE8
            ie8: true
        }))
        //修改擴展名
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/js'));
});

//js校驗任務--jshint
gulp.task('lint', function() {
    return gulp.src('./js/*.js')
        .pipe(jshint())
        //使用了tslint-stylish插件
        .pipe(jshint.reporter("jshint-stylish"));
});

//串行方式運行任務:作好依賴
gulp.task('default', ['sass', 'css', 'scripts', 'imagemin', 'html', 'watch']);

 

 說明：

（1）gulp的排除模式：

 

// 使用數組的方式來匹配多種文件
gulp.src(['*.js','!b*.js']) // 匹配全部js文件，但排除掉以b開頭的js文件
gulp.src(['!b*.js',*.js]) // 不會排除任何文件，由於排除模式不能出如今數組的第一個元素中

 

（2）gulp 對於 one after one 的任務鏈，須要加 return

 

 

注意：

（1）配置好文件路徑。

（2）安裝相關插件 npm i 插件名 --save-dev。

以上插件的安裝命令爲：

npm install --save-dev gulp
npm install gulp-htmlmin --save-dev
npm install gulp-sass --save-dev
npm install gulp-clean-css --save-dev
npm install gulp-css-spriter --save-dev
npm install gulp-uglify --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-smushit --save-dev
npm install gulp-jshint --save-dev
npm install gulp-rename --save-dev
npm install gulp-cache --save-dev
npm install gulp-file-include --save-dev

（3）全部的文件命名不能出現中文字符。 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程