一步步建立基於React+EF6+WebApi2+Gulp的項目（前端篇）

標籤：

一、關於Gulp

Q1:　　為什麼需要Gulp或Grunt？

1.　　緩衝問題，javascript和css都屬於靜態檔案，因此當我們修改javascript檔案時候，經常會遇到local沒問題，但是部署到server時候，問題依舊存在，通常這就是緩衝導致

2.　　Javascript和css等項目依賴關係

依賴的產生，會導致請求時間的延長，影響效能。其次，越來越多的js和cs檔案，需要請求多次，而瀏覽器的請求每次請求是有限的，因此我們需要壓縮js和cs檔案，來減少請求次數，提高效能。

Q2:　　為什麼選擇Gulp?

Gulp的核心是基於流來進行檔案的壓縮，而Grunt是基於臨時檔案形式。Gulp減少了過多臨時檔案的產生，關於2者對比，如下表

Grunt	Gulp
Config First	Code First
Base on file	Base on stream
3000+ plugin	1000+plugin

其次，兩者的過程也不一致

Grunt： Source-->Subtask1-->Temp.-->Subtask2-->Target //subtask越多產生的temp也就越多，這些temp檔案是存放於disk之上的

Gulp:　　Soource-->Subtask1-->Subtask2-->gulp.dest()-->Target 

在文法寫法上，gulp也更簡便和清晰

//grunt的文法grunt.initConfig({    less: {        development: {            files: {                "build/tmp/app.css": "assets/app.less"            }        }    },    autoprefixer: {        options: {            browsers: [‘last 2 version‘, ‘ie 8‘, ‘ie 9‘]        },        multiple_files: {            expand: true,            flatten: true,            src: ‘build/tmp/app.css‘,            dest: ‘build/‘        }    }});grunt.loadNpmTasks(‘grunt-contrib-less‘);grunt.loadNpmTasks(‘grunt-autoprefixer‘);grunt.registerTask(‘css‘, [‘less‘, ‘autoprefixer‘]);

//gulp的文法var gulp = require(‘gulp‘),    less = require(‘gulp-less‘),    autoprefix = require(‘gulp-autoprefixer‘);gulp.task(‘css‘, function() {    gulp.src(‘assets/app.less‘)        .pipe(less())        .pipe(autoprefix(‘last 2 version‘, ‘ie 8‘, ‘ie 9‘))        .pipe(gulp.dest(‘build‘));});

本文主要關於運用gulp的目的和如何運用，gulp更多的細節還請參考其他學習資料

二、建立我們的gulp

1. 安裝

npm install -g gulp

2. 建立我們的gulpfile.js檔案

在使用gulp的時候，我們需要建立gulpfile.js，這是npm執行gulp所定向的檔案名稱。

a. 首先定義我們的所要壓縮的檔案來源和去處

var paths = {    src : {        jsx: ‘Scripts/App/Components/*.jsx‘,        componentsRoot: ‘./Scripts/App/components/‘,        app: ‘./Scripts/App/app.js‘,        flux: ‘./Scripts/App/flux.js‘,        scripts: ‘Scripts/**/*.js‘    },    dest: {        root: ‘root‘,        bundles: ‘root/Scripts/dist‘,        css: ‘root/Content/Style/app‘,        bootstrap: ‘root/Content/Style/libs/bootstrap‘,        serverBundle: ‘serverBundle.js‘,        clientBundle: ‘clientBundle.js‘,        jsx: ‘Scripts/App/Components‘    }};

b. 其他可能需要引用的模組

var externalLibs = [‘alt‘,‘jQuery‘,‘bootstrap‘];

 

一步步建立基於React+EF6+WebApi2+Gulp的項目（前端篇）