前端自動化構建工具gulp記錄

時間 2019-11-20

標籤前端自動化構建工具 gulp 記錄欄目測試自動化简体版

原文原文鏈接

什麼是gulp

答：Gulp 是一款基於任務的設計模式的自動化工具，經過插件的配合解決全套前端解決方案，如靜態頁面壓縮、圖片壓縮、JS合併、SASS同步編譯並壓縮CSS、服務器控制客戶端同步刷新。。

爲何要用gulp?

一、js和css屬於靜態文件，不少時候瀏覽器存在緩存機制，爲了不緩存帶來的誤會，能夠利用構建工具，給每個靜態文件添加一個版本號，這樣瀏覽器就會認爲是新的文件，就不存在緩存機制。

二、性能優化：文件合併，減小http請求；文件壓縮，減小文件體積，加快下載速度；

三、效率提高：自動添加CSS3的vendor前綴；代碼分析檢查改正；在使用MVC和MVVM的框架後，可在提交以前，使用gulp自動跑一遍單元測試；

怎麼用？

一、安裝nodejs

首先，安裝gulp以前，先安裝nodejs環境，由於gulp是基於nodejs的前端構建工具

查看安裝版本

二、全局安裝gulp

若是咱們的電腦是第一次使用gulp，先全局安裝一遍

1 $ npm install gulp -g

查看是否安裝成功gulp -v，出現版本號即爲正確安裝。javascript

三、本地項目gulp安裝

先經過cd命令行進入到本地項目目錄css

1 npm install —-save-dev gulp

此時文件下多了個node_modules的文件夾html

在項目根目錄下建立gulpfile.js文件，而後安裝插件

gulp 經常使用插件（每一個本地項目都須要單獨安裝插件，固然，你也能夠把其它項目的插件拷貝過去）前端

前端項目須要的功能：
一、圖片（壓縮圖片支持jpg、png、gif）
二、樣式（支持sass 同時支持合併、壓縮、重命名）
三、javascript （檢查、合併、壓縮、重命名）
四、html （壓縮）
五、客戶端同步刷新顯示修改
六、構建項目前清除發佈環境下的文件（保持發佈環境的清潔）java

經過gulp plugins，尋找對於的gulp組件
gulp-imagemin: 壓縮圖片
gulp-ruby-sass: 支持sass
gulp-minify-css: 壓縮css
gulp-jshint: 檢查js
gulp-uglify: 壓縮js
gulp-concat: 合併文件
gulp-rename: 重命名文件
gulp-htmlmin: 壓縮html
gulp-clean: 清空文件夾 gulp-cache 圖片緩存，只有圖片替換了才壓縮 gulp-livereload 自動刷新頁面node
更具須要選擇，更多插件能夠看這裏gulpjs.com/plugins/npm

1 npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

配置gulpfile.js文件

/**
 * 組件安裝
 * npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
 */
// 引入 gulp及組件
var gulp    = require('gulp'),                 //基礎庫
    imagemin = require('gulp-imagemin'),       //圖片壓縮
    sass = require('gulp-ruby-sass'),          //sass
    autoprefixer = require('gulp-autoprefixer'),//自動添加css前綴
    minifycss = require('gulp-minify-css'),    //css壓縮
    jshint = require('gulp-jshint'),           //js檢查
    uglify  = require('gulp-uglify'),          //js壓縮
    rename = require('gulp-rename'),           //重命名
    concat  = require('gulp-concat'),          //合併文件
    cache = require('gulp-cache'),             //只有圖片替換了才壓縮（gulp-cache）
    clean = require('gulp-clean');            //清空文件夾


// HTML處理
gulp.task('html', function() {
    var htmlSrc = './src/*.html',
        htmlDst = './dist/';

    return gulp.src(htmlSrc)
        .pipe(gulp.dest(htmlDst))
});

// 樣式處理
gulp.task('css', function () {
    var cssSrc = './src/scss/*.scss',
        cssDst = './dist/css/';

    return  sass(cssSrc, { style: 'expanded' })
        .pipe(gulp.dest(cssDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest(cssDst));
});

// 圖片處理
gulp.task('images', function(){
    var imgSrc = './src/images/**/*',
        imgDst = './dist/images/';
    return gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
});


// 建立js壓縮任務
gulp.task('js', function () {
    var jsSrc = './src/js/*.js',
        jsDst ='./dist/js/';

   return gulp.src(jsSrc)
       .pipe(concat('main.js'))
       .pipe(gulp.dest(jsDst))
       .pipe(rename({ suffix: '.min' }))
       .pipe(uglify())
       .pipe(gulp.dest(jsDst));
});


// 清空圖片、樣式、js
gulp.task('clean', function() {
    return gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
        .pipe(clean());
});

// 默認任務 清空圖片、樣式、js並重建 運行語句 gulp
gulp.task('default', ['clean'], function(){
    return gulp.start('html','css','images','js');
});


// 監放任務 運行語句 gulp watch
gulp.task('watch',function(){

   // 監聽html
    gulp.watch('./src/*.html', function(event){
        gulp.run('html');
    })
    // 監聽css
    gulp.watch('./src/scss/*.scss', function(){
        gulp.run('css');
    });
    // 監聽images
    gulp.watch('./src/images/**/*', function(){
        gulp.run('images');
    });
    // 監聽js
    gulp.watch('./src/js/*.js', function(){
        gulp.run('js');
    });

});

四、運行：gulp

能夠單獨運行某一個任務設計模式