使用gulp構建項目

gulp.js做爲一個前端構建工具，相似於webpack、Grountjs、rollupjs，不過相對於其餘幾種打包工具，gulp的使用更輕量，配置更簡單，打包速度更快，今天不說他們幾個的區別，也不說它的實現原理，直接說gulp如何使用。

1. 使用背景
2. 安裝gulp
3. gulp的幾個經常使用api
4. 配置經常使用插件

一、使用背景

最近公司官網迭代升級，數據交互基本沒有，都是一些展現類的頁面，頁面也不是特別多，因此考慮直接寫靜態頁面放到服務端；產品要求適配各不一樣pc端屏幕的大小，設計給稿尺寸標準爲1920，考慮到不一樣分辨率的設備，這次適配標準採用rem；想必rem原理你們都知道，要將設計尺寸轉化成rem須要一個轉化公式，即

　　　　計算尺寸 = 標註尺寸 / 設計尺寸 * 10rem

考慮到上面的計算方式，每一個標註尺寸都須要轉化爲rem，因此考慮到使用less/sass來計算各尺寸大小，因爲靜態Html沒法直接使用less/sass，又不想用webpack，因此選用gulp來做爲構建工具編譯less/sass，還能夠方便開發，下面來開始搭建gulp

二、安裝與配置gulp

首先全局安裝gulp（node.js已安裝）

cnpm install gulp -g

建立一個gulp文件夾（名字自定義）

在新建的文件夾下面啓動命令行生成package.json

cnpm init

入口文件改成gulpfile.js（gulpfile.js爲gulp工程的配置文件）也能夠直接跳過，在package.json文件裏修改

這裏gulp工程就初始化完成了，下面來講一下gulp的幾個api

三、gulp的幾個經常使用api

gulp很簡單，其api也很少，在它的官網均可以很容易看獲得，包括gulp.task()、gulp.src()、gulp.dest()、gulp.watch()

（1）、gulp.task()用以建立一個任務，傳入兩個參數； ==>  gulp.task('style',function(){})

　　　　參數一爲一個String類型字符串，做爲當前任務名稱

　　　　參數二爲一個Function，用來配置當前任務執行的操做

（2）、gulp.src()用以指定處理目標，傳入一個文件路徑或一個文件夾路徑，類型爲String的參數；==> gulp.src('src/styles/*.less')

（3）、gulp.dest()用以輸出處理後的文件存放目錄，一樣傳入一個文件路徑或一個文件夾路徑，類型爲String的參數；==> gulp.dest('dist/css')

（4）、gulp.watch()用以監視文件的變化，當文件發生變化後，咱們能夠利用它來執行相應的任務，傳入兩個參數；==> gulp.watch('src/styles/*.less',['style']);

　　　　參數一爲監聽的目標（String）

　　　　參數二爲執行的任務名稱（Array）

 四、配置經常使用插件

可能上面說的不太好理解，下面是我正在用的一個簡單的gulp工具，以此爲例配置一個gulp構建工程，用到了下面幾個插件

• gulp-less                  // css預處理插件
• gulp-cssnano           // css壓縮插件
• gulp-concat              // 合併js文件
• gulp-uglify                // 壓縮js文件
• gulp-htmlmin            // 壓縮html
• browser-sync           // 文件熱加載

配置文件以下

'use strict';
var gulp=require('gulp');
var less=require('gulp-less');
var cssnano=require('gulp-cssnano');
var concat=require('gulp-concat');
var uglify=require('gulp-uglify');
var htmlmin=require('gulp-htmlmin');
var browserSync=require('browser-sync');


gulp.task('style',function(){
    gulp.src('src/styles/*.less')
    .pipe(less())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.reload({
        stream:true
    }));
});


gulp.task('script',function(){
    gulp.src('src/scripts/*.js')
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(browserSync.reload({
        stream:true
    }));
})


gulp.task('image',function(){
    gulp.src('src/images/*.*')
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.reload({
        stream:true
    }));
})

gulp.task('html',function(){
    gulp.src('src/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({
        stream:true
    }));
})

gulp.task('server',function(){  // 啓動gulp server
    browserSync({
        server:{
            baseDir:['dist']
        },
    },function(err,bs){
        console.log(bs.options.getIn(["urls","local"]));
    });

    gulp.watch('src/styles/*.less',['style']);
    gulp.watch('src/scripts/*.js',['script']);
    gulp.watch('src/images/*.*',['image']);
    gulp.watch('src/*.html',['html']);

});