前端-如何用gulp快速搭建項目（sass預編譯，代碼壓縮，css前綴，瀏覽器自動刷新，雪碧圖合成）

時間 2019-11-17

標籤前端如何 gulp 快速搭建項目 sass 編譯代碼壓縮 css 前綴瀏覽器自動刷新雪碧合成欄目 JavaScript 简体版

原文原文鏈接

一：gulp優勢：css

易於使用

經過代碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理；html

插件高質

Gulp 嚴格的插件指南確保插件如你指望的那樣簡潔高質得工做。node

構建快速

利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。npm

易於學習

經過最少的 API，掌握 Gulp 絕不費力，構建工做盡在掌握：如同一系列流管道。gulp

2、依賴安裝瀏覽器

1.安裝node.js,sass

2.全局安裝gulp函數

npm install gulp -g學習

3.本地安裝gulp優化

npm init 初始化項目目錄，生產package.js文件，

npm install gulp --save-dev 本地安裝gulp

4.安裝依賴（經常使用依賴截圖以下）

5.在根目錄下建立gulpfile.js文件用來編寫任務。

3、代碼實現以下

1.先附上目錄結構

2.建立一個編譯sass 的任務

gulp.task('compileSass',function(){
    gulp.src('./src/sass/*.scss')
    // 編譯sass
    .pipe(sass({outputStyle:'compact'}))

    // 輸出編譯後的css文件
    .pipe(gulp.dest('./src/css'))
    // sass編譯完成後刷新
    .pipe(browserSync.reload({stream:true}))
})

3.建立一個自動加css前綴，解決瀏覽器的css代碼兼容性問題

var autoprefixer = require('gulp-autoprefixer');

gulp.task('testAutoFx', function () {
gulp.src('src/css/*.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css'));
});

4.建立一個瀏覽器自動刷新任務，當css 、js、html更改時自動刷新網頁

var browserSync = require('browser-sync').create();

//瀏覽器同步
gulp.task("server",function(){
browserSync.init({
server:{baseDir:'./src'}
});

// **表明任意目錄
// *表明任意文件名
gulp.watch('./src/**/*.html').on('change',browserSync.reload);
gulp.watch('./src/js/*.js').on('change',browserSync.reload);
gulp.watch('./src/css/*.css').on('change',browserSync.reload);

// Sass編譯完成後再刷新
gulp.watch('./src/sass/*.scss',['compileSass']);//自動執行編譯sass任務
gulp.watch('./src/css/*.css',['testAutoFx']);//自動加兼容性代碼
})

當開發時在根目錄路徑下命令行執行 gulp server 就會實現自動編譯、瀏覽器自動刷新操做

編譯前sass

編譯後css

5.當項目結束後須要一個壓縮的任務

var uglify= require('gulp-uglify');

//建立一個打包js壓縮的任務

gulp.task('jsmin',function(){
gulp.src('src/js/*.js') 
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
})

6.建立一個壓縮css任務

var cssmin = require('gulp-minify-css');

//建立一個打包css壓縮的任務

gulp.task('cssmin',function(){
gulp.src('dist/css/*.css')
.pipe(cssmin({
advanced: false,//類型：Boolean 默認：true [是否開啓高級優化（合併選擇器等）]
compatibility: 'ie7',//保留ie7及如下兼容寫法 類型：String 默認：''or'*' [啓用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: true,//類型：Boolean 默認：false [是否保留換行]
keepSpecialComments: '*'
//保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴
}))
.pipe(gulp.dest('dist/mincss'));
})

7.把這兩個壓縮任務放一塊兒執行

//把壓縮js 和css 放到一塊兒

gulp.task('minJsCss',['cssmin','jsmin'])

因此容許這個任務就會對js 以及css 進行壓縮

8.最後介紹一下一個比較實用的操做，就是當項目中比較多的小圖標須要生產雪碧圖的時候，能夠用gulp.spritesmith自動完成並生成樣式文件

首先個人icon圖標文件以下：

創建任務

var spritesmith=require('gulp.spritesmith');

//icon 圖標變爲雪碧圖
gulp.task('spritesmith',function(){
    gulp.src('src/img/*.png')
        .pipe(spritesmith({
            imgName:'sprite.png',//保存合併後的名稱
            cssName:'dist/spritecss/sprite.css',//保存合併後css樣式的地址
            padding:15,//合併時兩個圖片的間距
            algorithm:'binary-tree',//註釋1
            //cssTemplate:'dest/css/handlebarsStr.css'//註釋2
            cssTemplate:function(data){             //若是是函數的話，這能夠這樣寫
               var arr=[];
                data.sprites.forEach(function (sprite) {
                    arr.push(".icon-"+sprite.name+
                    "{" +
                    "background-image: url('"+sprite.escaped_image+"');"+
                    "background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+
                    "width:"+sprite.px.width+";"+
                    "height:"+sprite.px.height+";"+
                    "}\n");
                });
                return arr.join("");
            }
        }))
        .pipe(gulp.dest('dist/images/sprite'));
})

而後執行命令 gulp spritesmith 最後生成以下圖所示：

雪碧圖：

樣式文件

OK，最後附上個人gulpfile.js文件

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify= require('gulp-uglify');
var cssmin = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var spritesmith=require('gulp.spritesmith');
var browserSync = require('browser-sync').create();

//建立一個編譯sass 的任務
gulp.task('compileSass',function(){
    gulp.src('./src/sass/*.scss')
    // 編譯sass
    .pipe(sass({outputStyle:'compact'}))

    // 輸出編譯後的css文件
    .pipe(gulp.dest('./src/css'))
    // sass編譯完成後刷新
    .pipe(browserSync.reload({stream:true}))
})

//瀏覽器同步
gulp.task("server",function(){
    browserSync.init({
        server:{baseDir:'./src'}
    });

    // **表明任意目錄
    // *表明任意文件名
    gulp.watch('./src/**/*.html').on('change',browserSync.reload);
    gulp.watch('./src/js/*.js').on('change',browserSync.reload);
    gulp.watch('./src/css/*.css').on('change',browserSync.reload);

    // Sass編譯完成後再刷新
    gulp.watch('./src/sass/*.scss',['compileSass']);
    gulp.watch('./src/css/*.css',['testAutoFx']);
})


//建立一個打包js壓縮的任務
gulp.task('jsmin',function(){
     gulp.src('src/js/*.js') 
     .pipe(uglify())
     .pipe(gulp.dest('dist/js'));
})
//建立一個打包css壓縮的任務
gulp.task('cssmin',function(){
    gulp.src('dist/css/*.css')
        .pipe(cssmin({
            advanced: false,//類型：Boolean 默認：true [是否開啓高級優化（合併選擇器等）]
            compatibility: 'ie7',//保留ie7及如下兼容寫法 類型：String 默認：''or'*' [啓用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,//類型：Boolean 默認：false [是否保留換行]
            keepSpecialComments: '*'
            //保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴
        }))
        .pipe(gulp.dest('dist/mincss'));
})

//自動加css前綴
gulp.task('testAutoFx', function () {
    gulp.src('src/css/*.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist/css'));
});

//把壓縮js 和css 放到一塊兒
gulp.task('minJsCss',['cssmin','jsmin'])



//icon 圖標變爲雪碧圖
gulp.task('spritesmith',function(){
    gulp.src('src/img/*.png')
        .pipe(spritesmith({
            imgName:'sprite.png',//保存合併後的名稱
            cssName:'dist/spritecss/sprite.css',//保存合併後css樣式的地址
            padding:15,//合併時兩個圖片的間距
            algorithm:'binary-tree',//註釋1
            //cssTemplate:'dest/css/handlebarsStr.css'//註釋2
            cssTemplate:function(data){             //若是是函數的話，這能夠這樣寫
               var arr=[];
                data.sprites.forEach(function (sprite) {
                    arr.push(".icon-"+sprite.name+
                    "{" +
                    "background-image: url('"+sprite.escaped_image+"');"+
                    "background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+
                    "width:"+sprite.px.width+";"+
                    "height:"+sprite.px.height+";"+
                    "}\n");
                });
                return arr.join("");
            }
        }))
        .pipe(gulp.dest('dist/images/sprite'));
})