使用gulp搭建前端構建工具

時間 2019-12-05

原文原文鏈接

Why？

今天跟你們分享的是關於目前本身的公司的項目優化中所使用到的gulp構建工具。目前公司對產品的優化決定採用VueJs來進行單頁面開發，無疑這種新的技術框架對一個項目的效率會提高得更快更強。現在前端的發展速度飛快，彷彿稍微中止學習的腳步就會被時代拋棄，但咱們也切忌過於急躁，所謂萬卷不離其宗，打好基礎是關鍵。javascript

What？

在進行基礎鞏固的基礎上，使用gulp構建工具能夠在開發的過程當中進行部分自動化構建，如對頁面的監聽，對樣式的編譯，對代碼的壓縮與打包。
做爲一個小型的項目來講，這些基本就足夠了。
搭建gulp最主要的是使用gulp的工做流，經過在gulp中的gulpfile文件編寫咱們的工做流，就彷彿一個個車間，在咱們一條條命令下，就能完成咱們須要的工做。css

How？

1.安裝NodeJs

首先，最基本也最重要的是，咱們須要搭建node環境。訪問http://nodejs.org，下載完成後直接運行程序，就一切準備就緒。npm會隨着安裝包一塊兒安裝。
爲了確保Node已經正確安裝，咱們執行幾個命令。html

node -v

若是正確安裝的話，你會看到所安裝的Node的版本號，接下來看看npm。前端

npm -v

這一樣能獲得npm的版本號。
若是這兩行命令沒有獲得返回，可能node就沒有安裝正確，嘗試重啓下命令行工具，若是還不行的話，只能回到第一步進行重裝。
安裝成功後咱們就能夠在目標目錄中初始化環境java

npm init

使用上述代碼在項目空間中初始化環境，按步驟填寫後會生成package.json文件node

2.安裝gulp

使用npm工具下載gulp。在命令行中輸入git

sudo npm install -g gulp

使用下面的命令查看gulp的版本號以確保gulp已經被正確安裝。github

gulp -v

接下來，咱們須要將gulp安裝到項目本地npm

npm install —-save-dev gulp

這裏，咱們使用—-save-dev來更新package.json文件，更新devDependencies值，以代表項目須要依賴gulp。
Dependencies能夠向其餘參與項目的人指明項目在開發環境和生產環境中的node模塊依懶關係，想要更加深刻的瞭解它能夠看看package.json文檔。json

3.gulpfile文檔編寫

在這裏使用我在項目中使用的gulpfile文件。

// 引入 gulp
var gulp = require('gulp');

// 引入組件
var jshint = require('gulp-jshint'); //語法檢查
var sass = require('gulp-sass'); //sass編譯
var concat = require('gulp-concat'); //合併
var uglify = require('gulp-uglify'); //js壓縮
var rename = require('gulp-rename'); //重命名
var htmlmin = require('gulp-htmlmin'); //頁面壓縮
var minifyCss = require('gulp-minify-css'); //css壓縮
var rev = require('gulp-rev'); //對文件名加MD5後綴
var revCollector = require('gulp-rev-collector'); //路徑替換
var cheerio = require('gulp-cheerio'); //替換引用


// 默認任務 
gulp.task('default', ['sass', 'lint']);
// 開發環境gulp任務
gulp.task('watch', function() {
    // gulp.watch('./src/index.html', ['sass', 'lint']);
    gulp.watch('./src/scss/*.scss', ['sass']);
    gulp.watch('./src/js/*.js', ['lint']);
});
// 檢查腳本 
gulp.task('lint', function() {
    gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
// 編譯Sass 
gulp.task('sass', function() {
    gulp.src('./src/scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./src/css'));
});



// // 生產環境gulp任務
gulp.task('dev', ['cssConcat', 'scripts']);
// js合併，壓縮文件 
gulp.task('scripts', function() {
    gulp.src('./src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./dist/js'))
        .pipe(rev.manifest({merge: true}))
        .pipe(gulp.dest('./rev/js/'));
});
// css合併壓縮
gulp.task('cssConcat', function() {
    gulp.src('./src/css/**.css')
        .pipe(concat('style.min.css'))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('./dist/css'))
        .pipe(rev.manifest({merge: true}))
        .pipe(gulp.dest('./rev/css/'));
});
//改變引用文件
gulp.task('rev', function() {
    gulp.src(['./rev/css/rev-manifest.json', './rev/js/rev-manifest.json', './dist/index.html'])
        .pipe(revCollector()) 
        .pipe(gulp.dest('./dist/'));
});
gulp.task('indexHtml', function() {
    return gulp.src('index.html')
        .pipe(cheerio(function ($) {
            $('script').remove();
            $('link').remove();
            $('body').append('<script src="./js/all.min.js"></script>');
            $('head').append('<link rel="stylesheet" href="./css/style.min.css">');
        }))
        .pipe(gulp.dest('dist/'));
});
//壓縮html文件
gulp.task('minify', function() {
    return gulp.src('dist/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('./dist/'));
});

基本上在這樣的工做流程中，代碼的壓縮合並，監聽發佈均可以使用gulp流來控制。
在使用gulpfile以前，要先對所須要的依賴進行安裝。使用npm對依賴進行下載，這裏下載的就是文件中所require引用的依賴，這裏就不將所有寫下來了。