npm + gulp + scss + 項目架構

 

原創： 格爾尼卡ぃ

在此聲明，每部分成色標註爲文件的變化，而且都帶有關鍵性的註釋語句。但願能給你們帶來幫助。

1、npm講解

  https://www.npmjs.com.cn/

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：

    容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。

    容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。

    容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

因爲nodejs已經集成了npm，因此npm也一併安裝好了。一樣能夠經過輸入 "npm -v" 來測試是否成功安裝。

node -v

npm -v

因爲npm的服務器在國外，國內爲了保證訪問速度，咱們能夠訪問淘寶鏡像，之後就能夠經過cnpm代替npm指令了

http://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝模塊

npm install <Module Name> --global             ------ 全局安裝

    //簡寫爲 npm i <Module Name> -g          ---     必定要小寫                     

npm install <Module Name> ------ 臨時安裝

    // 簡寫爲 npm i <Module Name>

npm install <Module Name> --save                ------ 項目依賴

    // 簡寫爲 npm i<Module Name> -S        ---     必定要大寫

npm install <Module Name> --save-dev            ------ 開發依賴

    // 簡寫爲 npm i <Module Name> -D          ---     必定要大寫

升級模塊、更新模塊

npm install <Module Name>@version --global             ------ 全局安裝

    //簡寫爲 npm i <Module Name>@version -g          ---     必定要小寫                     

npm install <Module Name>@version------ 臨時安裝

    // 簡寫爲 npm i <Module Name>@version

npm install <Module Name>@version --save                ------ 項目依賴

    // 簡寫爲 npm i<Module Name>@version -S        ---     必定要大寫

npm install <Module Name>@version --save-dev            ------ 開發依賴

    // 簡寫爲 npm i <Module Name>@version -D          ---     必定要大寫

刪除模塊

npm uninstall <Module Name> -g

npm uninstall <Module Name> -S 

npm uninstall <Module Name> -D 

2、gulp

        gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；她不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用她，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。

        gulp是基於Nodejs的自動任務運行器，她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

        gulp 和 grunt 很是相似，但相比於 grunt 的頻繁 IO 操做，gulp 的流操做，能更快地更便捷地完成構建工做。

        全局安裝gulp

cnpm i gulp -g

       查看是否正確安裝：命令提示符執行gulp -v，出現版本號即爲正確安裝，目前最新版本爲3.9.1

gulp -v

        在項目目錄處按住shift，點擊鼠標右鍵，選擇打開命令行，經過cnpm init建立package.json文件,一直敲回車便可

cnpm init

// 如下爲輸出內容

name: (gulp-lesson)

version: (1.0.0)

description:

entry point: (index.js)

test command:

git repository:

keywords:

author:

license: (ISC)

About to write to E:\course-wxx\sz1805\lesson2\gulp-lesson\package.json:

 

{

  "name": "gulp-lesson",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

Is this ok? (yes)

打開package.json文件，能夠看到以下內容

{

  "name": "gulp-lesson",   // 項目名稱

  "version": "1.0.0",            // 項目版本號

  "description": "",            // 項目描述

  "main": "index.js",         // 默認入口文件

  "scripts": {                     // 測試命令，能夠經過npm run test運行後續的指令，能夠配置，後續會講解

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",                // 做者

  "license": "ISC"            //  模塊制定協議，讓用戶知道他們有何權限來使用你的模塊，以及使用該模塊有哪些限制

}

3、在該項目目錄下建立一個js文件，gulpfile.js

4、安裝基礎模塊

cnpm i gulp -S

    此時會發現項目文件夾中package.json內容發生了改變

{

  "name": "gulp-lesson",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "dependencies": { // 開發依賴

    "gulp": "^3.9.1"

  }

}

5、配置項目基本目錄結構

|-gulp-lesson

    |-assets               -------   靜態資源文件

        |-css                  -------   第三方css文件

        |-images               -------   項目圖片文件

        |-js                   -------   第三方js文件

    |-js                   -------   本身的js文件

    |-lib                  -------   scss框架文件

        base.scss          -------   全局base定義，可使用在任何地方

        classes.scss       -------   scss函數的定義

        function.scss      -------   自定義全局函數

        reset.scss         ------    重置mobile及高級瀏覽器上常見的異常

        variables.scss     ------    全局variables，基礎變量map

    |-node_modules         -------   模塊依賴文件

    |-scss                 -------   本身的scss文件

    |-views                -------   項目結構文件

        cart.html           -------   購物車頁面 -----  全選、反選、選擇計算總價、總數量，數量加減

        category.html       -------   分類頁面   -----  各類排序篩選

        detail.html         -------   詳情頁面   -----  吸頂效果、放大效果、詳情介紹，加購物畫車

        index.html          -------   首頁       -----  菜單，樓梯效果，輪播圖

        login.html          -------   登陸頁面   -----  必須表單驗證，後天可用php驗證

        order.html          -------   訂單頁面   -----  地址的填寫、支付方式選擇、確認表單

        pay.html            -------   支付頁面   -----  假的二維碼，支付按鈕，模態框輸金額，點支付

        register.html       -------   註冊頁面   -----  必須表單驗證，後天可用php驗證

        usercenter.html     -------   我的中心   -----  修改密碼，地址管理，訂單管理

    gulpfile.json           -------   gulp項目配置文件   

    package.json            -------   項目基礎配置文件

6、編寫gulpfile.js文件，實現將views，assets文件複製到dist文件夾下，注意dist文件咱們並未建立

var gulp = require('gulp')

gulp.task('copy-views', function () {

    gulp.src('views/**/*')                    // 選中views文件夾下的全部文件包括子文件中的

        .pipe(                                        // 管道思想，上一級的輸出做爲下一級的輸入

            gulp.dest('dist/views')          // 將上訴命令的結果放置dist文件夾中，沒有dist文件夾會自動建立

        )

})

gulp.task('copy-assets', function () {

    gulp.src('assets/**/*')                     // 選中views文件夾下的全部文件包括子文件中的

        .pipe(                                         // 管道思想，上一級的輸出做爲下一級的輸入

            gulp.dest('dist/assets')         // 將上訴命令的結果放置dist文件夾中，沒有dist文件夾會自動建立

        )

})

此時在該項目目錄下運行以下命令

gulp copy-views

[23:02:51] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js

[23:02:51] Starting 'copy-views'...

[23:02:51] Finished 'copy-views' after 5.82 ms

 

gulp copy-assets

[23:03:20] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js

[23:03:20] Starting 'copy-assets'...

[23:03:20] Finished 'copy-assets' after 5.7 ms

咱們就會發如今項目下出現了一個dist的文件夾，下面有兩個文件夾，分別爲assets和views,結構以下：

|-dist

    |-assets              

            |-css                

            |-images              

            |-js     

        |-views

            cart.html           

            category.html       

            detail.html        

            index.html          

            login.html         

            order.html          

            pay.html            

            register.html       

            usercenter.html     

那麼咱們能不能一次性執行完上面的兩個指令呢？

答案必然是能夠的

咱們能夠修改gulpfile.js文件以下

var gulp = require('gulp')

gulp.task('copy-views', function () {

    gulp.src('views/**/*')

        .pipe(

            gulp.dest('dist/views')

        )

})

gulp.task('copy-assets', function () {

    gulp.src('assets/**/*')

        .pipe(

            gulp.dest('dist/assets')

        )

})

//build是gulp中自帶的，是默認的，你不須要更更名字

gulp.task('build', ['copy-views', 'copy-assets'], function () {

    console.log('ok')

})

而後只須要執行如下命令便可，能夠先刪除dist文件夾而後再試查看效果,

gulp build

[23:18:28] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js

[23:18:28] Starting 'copy-views'...

[23:18:28] Finished 'copy-views' after 5.76 ms

[23:18:28] Starting 'copy-assets'...

[23:18:28] Finished 'copy-assets' after 712 μs

[23:18:28] Starting 'build'...

ok

[23:18:28] Finished 'build' after 100 μs

咱們發現dist文件夾又神奇的出現了

接下來咱們接入css預處理方式之sass/scss，這樣咱們就可使用scss來編寫css了

7、sass/scss模塊使用

cnpm i node-sass gulp-sass -S

打開index.html文件，編寫以下代碼，注意咱們不在dist文件夾下編輯任何文件

<body>

    <div class="container"></div>

</body>

在scss文件夾下建立common.scss文件，做爲項目的通用樣式文件，寫入以下代碼

@import './../lib/reset.scss';

.container {

    @include rect(90%, 1000px);

    @include margin(0 auto);

    @include background-color(#eee);

}

安裝壓縮css模塊和更更名字模塊

cnpm i gulp-clean-css gulp-rename -S

如今編輯gulpfile.js文件，而且添加scss任務到默認列表組中

var gulp = require('gulp')

var sass = require('gulp-sass')

var cleanCss = require('gulp-clean-css')

var rename = require('gulp-rename')

gulp.task('copy-views', function () {

    gulp.src('views/**/*')

        .pipe(

            gulp.dest('dist/views')

        )

})

gulp.task('copy-assets', function () {

    gulp.src('assets/**/*')

        .pipe(

            gulp.dest('dist/assets')

        )

})

gulp.task('scss', function () {

    gulp.src('scss/**/*.scss')                            // 找到scss文件夾下的全部的scss文件

        .pipe(sass().on('error',sass.logError))   // 會將scss文件處理爲css文件

        .pipe(rename((path) => {                   // 將css後綴名改成css文件

            path.extname = '.css'

        }))

        .pipe(gulp.dest('dist/css'))                 // 將css文件放在dist目錄下

        .pipe(cleanCss())                               // 將css文件下的css文件進行壓縮處理

        .pipe(rename((path) => {                // 將dist/css後綴名改成**.min.css文件

            path.extname = '.min.css'

        }))

        .pipe(gulp.dest('dist/css'))             // 將**.min.css問價放在dist文件中

})

gulp.task('build', ['copy-views', 'copy-assets','scss'], function () {

    console.log('ok')

})

此時執行以下命令，則可看到dist文件中出現了變化

gulp build

[23:41:52] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js

[23:41:52] Starting 'copy-views'...

[23:41:52] Finished 'copy-views' after 5.25 ms

[23:41:52] Starting 'copy-assets'...

[23:41:52] Finished 'copy-assets' after 574 μs

[23:41:52] Starting 'scss'...

[23:41:52] Finished 'scss' after 3.08 ms

[23:41:52] Starting 'build'...

ok

[23:41:52] Finished 'build' after 84 μs

 

|-dist

    |-assets

    |-css

        common.css        // 未壓縮的css代碼-----含註釋語句

        common.min.css    // 壓縮過的css代碼-----不含註釋語句    

    |-views

若是咱們作的是PC端的頁面，也許咱們得注意一下，在lib/base.scss文件中第14行代碼必須得是normal，若是在移動端須要根據屏幕寬度變化而實時變化的時候，咱們能夠更改成scaling

14 |       responsive-type:        normal   ------   寬高肯定不會變，若是爲scaling高度會隨着寬度變化而變化

若是咱們的文件內容發生改變後（修改完一個文件），咱們不可能實時運行gulp build從新構建出一個新的版本，因此咱們須要監聽文件的變化從而讓它自動更新。

8、監聽文件的變化

不只監聽文件變化，而且執行命令只想寫gulp命令，須要配置默認任務default

修改gulpfile.js文件以下

var gulp = require('gulp')

var sass = require('gulp-sass')

var cleanCss = require('gulp-clean-css')

var rename = require('gulp-rename')

gulp.task('copy-views', function () {

    gulp.src('views/**/*')

        .pipe(

            gulp.dest('dist/views')

        )

})

gulp.task('copy-assets', function () {

    gulp.src('assets/**/*')

        .pipe(

            gulp.dest('dist/assets')

        )

})

gulp.task('scss', function () {

    gulp.src('scss/**/*.scss')                         

        .pipe(sass().on('error',sass.logError))  

        .pipe(rename((path) => {                   

            path.extname = '.css'

        }))

        .pipe(gulp.dest('dist/css'))                 

        .pipe(cleanCss())                               

        .pipe(rename((path) => {                

            path.extname = '.min.css'

        }))

        .pipe(gulp.dest('dist/css'))             

})

gulp.task('watch', function () {

    gulp.watch('views/**/*', ['copy-views'])     //若是監聽到views文件夾內有內容發生變化，觸發copy-views任務

    gulp.watch('assets/**/*', ['copy-assets'])  //若是監聽到assets文件夾內有內容發生變化，觸發copy- assets任務

    gulp.watch('scss/**/*.scss', ['scss'])            //若是監聽到scss文件夾內有內容發生變化，觸發scss任務

})

gulp.task('build', ['copy-views', 'copy-assets','scss'], function () {

    console.log('ok')

})

gulp.task('default', ['build', 'watch']);  //默認執行build任務和watch任務

此時執行gulp指令便可，會自動執行監放任務

gulp
[23:56:23] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js

[23:56:23] Starting 'copy-views'...

[23:56:23] Finished 'copy-views' after 5.57 ms

[23:56:23] Starting 'copy-assets'...

[23:56:23] Finished 'copy-assets' after 633 μs

[23:56:23] Starting 'scss'...

[23:56:23] Finished 'scss' after 4.2 ms

[23:56:23] Starting 'build'...

ok

[23:56:23] Finished 'build' after 94 μs

[23:56:23] Starting 'watch'...

[23:56:23] Finished 'watch' after 19 ms

[23:56:23] Starting 'default'...

[23:56:23] Finished 'default' after 44 μs

-     // 閃動表示繼續監放任務的變化

隨意修改文件內部內容（添加文件，修改文件）便可發現dist文件夾中相對應的都發生了改變，好比咱們修改了views文件夾下的index.html

<div class="container">這裏是頁面</div>

則會發如今dist/views/index.html的內容也發生了改變

上面咱們進行了樣式，佈局的改變，接下來咱們設置一下js的改變

9、js文件的改變以及壓縮

安裝壓縮js的模塊

cnpm i gulp-uglify -S

在js文件夾建立 一個公共js文件common.js,編寫以下內容

alert('千鋒吳大勳')

alert('帥，很帥，很是帥')

修改gulpfile.js文件以下

var gulp = require('gulp')

var sass = require('gulp-sass')

var cleanCss = require('gulp-clean-css')

var rename = require('gulp-rename')

var uglify = require('gulp-uglify')

gulp.task('copy-views', function () {

    gulp.src('views/**/*')

        .pipe(

            gulp.dest('dist/views')

        )

})

gulp.task('copy-assets', function () {

    gulp.src('assets/**/*')

        .pipe(

            gulp.dest('dist/assets')

        )

})

gulp.task('scss', function () {

    gulp.src('scss/**/*.scss')                         

        .pipe(sass().on('error',sass.logError))  

        .pipe(rename((path) => {                   

            path.extname = '.css'

        }))

        .pipe(gulp.dest('dist/css'))                 

        .pipe(cleanCss())                               

        .pipe(rename((path) => {                

            path.extname = '.min.css'

        }))

        .pipe(gulp.dest('dist/css'))             

})

gulp.task('js', function () {

    gulp.src('js/**/*.js')                                // 找到js文件夾下的全部的js文件

        .pipe(rename((path) => {                  // 更改js文件夾下的全部的js文件名字

            path.extname = '.js'

        }))

        .pipe(                                                  // 放到dist/js中

            gulp.dest('dist/js')

        )

        .pipe(uglify())                                    // 壓縮js代碼

        .pipe(rename((path) => {                 // 更改dist/js文件夾下的全部的js文件名字爲*.min.js     

            path.extname = '.min.js'

        }))

        .pipe(                                                 // 放到dist/js中    

            gulp.dest('dist/js')

        )

})

gulp.task('watch', function () {

    gulp.watch('views/**/*', ['copy-views'])

    gulp.watch('assets/**/*', ['copy-assets'])

    gulp.watch('scss/**/*.scss', ['scss'])

    gulp.watch('js/**/*.js', ['js'])

})

gulp.task('build', ['copy-views', 'copy-assets', 'scss', 'js'], function () {

    console.log('ok')

})

gulp.task('default', ['build', 'watch']);

而後運行gulp指令，隨意修改assets、views、js、scss文件夾下的內容，都可發現dist文件中的內容發生了改變

上面的一些操做主要是文件的複製與內容的替換，咱們要想查看實時效果的話還得須要引入服務器

10、服務器的架設

安裝模塊gulp-connect 

cnpm i gulp-connect -S

必定要記住每次修改完文件也要從新啓動服務器，

具體修改文件gulpfile.js配置以下

var gulp = require('gulp')

var sass = require('gulp-sass')

var cleanCss = require('gulp-clean-css')

var rename = require('gulp-rename')

var uglify = require('gulp-uglify')

var connect = require('gulp-connect')

gulp.task('copy-views', function () {

    gulp.src('views/**/*')

        .pipe(

            gulp.dest('dist/views')

        )

        .pipe(connect.reload())        // 從新啓動服務器

})

gulp.task('copy-assets', function () {

    gulp.src('assets/**/*')

        .pipe(

            gulp.dest('dist/assets')

        )

        .pipe(connect.reload())       // 從新啓動服務器

})

gulp.task('scss', function () {

    gulp.src('scss/**/*.scss')                         

        .pipe(sass().on('error',sass.logError))  

        .pipe(rename((path) => {                   

            path.extname = '.css'

        }))

        .pipe(gulp.dest('dist/css'))                 

        .pipe(cleanCss())                               

        .pipe(rename((path) => {                

            path.extname = '.min.css'

        }))

        .pipe(gulp.dest('dist/css'))

        .pipe(connect.reload())       // 從新啓動服務器

})

gulp.task('js', function () {

    gulp.src('js/**/*.js')

        .pipe(rename((path) => {                   

            path.extname = '.js'

        }))

        .pipe(

            gulp.dest('dist/js')

        )

        .pipe(uglify())

        .pipe(rename((path) => {                   

            path.extname = '.min.js'

        }))

        .pipe(

            gulp.dest('dist/js')

        )

        .pipe(connect.reload())       // 從新啓動服務器

})

gulp.task('watch', function () {

    gulp.watch('views/**/*', ['copy-views'])

    gulp.watch('assets/**/*', ['copy-assets'])

    gulp.watch('scss/**/*.scss', ['scss'])

    gulp.watch('js/**/*.js', ['js'])

})

gulp.task('server', function () {          // 默認服務任務server

    connect.server({

        root: 'dist/views',                       //啓動目錄

        livereload: true                           //實時更新數據，須要調用connect.reload()

    })

})

gulp.task('build', ['copy-views', 'copy-assets', 'scss', 'js'], function () {

    console.log('ok')

})

gulp.task('default', ['build', 'watch', 'server']);

咱們都知道，項目中有一個版塊最耗費資源，那就是圖片，因此咱們須要對圖片進行壓縮

11、壓縮圖片

安裝模塊 gulp-imagemin

cnpm i gulp-imagemin -S

修改gulpfile.js文件以下

var gulp = require('gulp')

var sass = require('gulp-sass')

var cleanCss = require('gulp-clean-css')

var rename = require('gulp-rename')

var uglify = require('gulp-uglify')

var connect = require('gulp-connect')

var imageMin = require('gulp-imagemin');

gulp.task('copy-views', function () {

    gulp.src('views/**/*')

        .pipe(

            gulp.dest('dist/views')

        )

        .pipe(connect.reload())

})

gulp.task('copy-assets', function () {

    gulp.src('assets/**/*')

        .pipe(

            gulp.dest('dist/assets')

        )

        .pipe(connect.reload())

})

gulp.task('scss', function () {

    gulp.src('scss/**/*.scss')                         

        .pipe(sass().on('error',sass.logError))  

        .pipe(rename((path) => {                   

            path.extname = '.css'

        }))

        .pipe(gulp.dest('dist/css'))                 

        .pipe(cleanCss())                               

        .pipe(rename((path) => {                

            path.extname = '.min.css'

        }))

        .pipe(gulp.dest('dist/css'))

        .pipe(connect.reload())

})

gulp.task('js', function () {

    gulp.src('js/**/*.js')

        .pipe(rename((path) => {                   

            path.extname = '.js'

        }))

        .pipe(

            gulp.dest('dist/js')

        )

        .pipe(uglify())

        .pipe(rename((path) => {                   

            path.extname = '.min.js'

        }))

        .pipe(

            gulp.dest('dist/js')

        )

        .pipe(connect.reload())

})

gulp.task('image',function(){

    gulp.src('assets/images/**/*')

        .pipe(imageMin({

            optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）

            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片

            interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染

            multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化

        }))

        .pipe(gulp.dest('dist/assets/images'))

})

gulp.task('watch', function () {

    gulp.watch('views/**/*', ['copy-views'])

    gulp.watch('assets/**/*', ['copy-assets'])

    gulp.watch('scss/**/*.scss', ['scss'])

    gulp.watch('js/**/*.js', ['js'])

    gulp.watch('assets/images/**/*', ['image'])

})

gulp.task('server', function () {

    connect.server({

        root: 'dist/views',

        livereload: true

    })

})

gulp.task('build', ['copy-views', 'copy-assets', 'scss', 'js','image'], function () {

    console.log('ok')

})

gulp.task('default', ['build', 'watch', 'server']);

能夠添加一張圖片，執行指令gulp

gulp

[00:38:31] Using gulpfile E:\course-wxx\sz1805\lesson2\gulp-lesson\gulpfile.js

[00:38:31] Starting 'copy-views'...

[00:38:31] Finished 'copy-views' after 5.63 ms

[00:38:31] Starting 'copy-assets'...

[00:38:31] Finished 'copy-assets' after 773 μs

[00:38:31] Starting 'scss'...

[00:38:31] Finished 'scss' after 2.94 ms

[00:38:31] Starting 'js'...

[00:38:31] Finished 'js' after 1.06 ms

[00:38:31] Starting 'image'...

[00:38:31] Finished 'image' after 1.23 ms

[00:38:31] Starting 'build'...

ok

[00:38:31] Finished 'build' after 317 μs

[00:38:31] Starting 'watch'...

[00:38:31] Finished 'watch' after 22 ms

[00:38:31] Starting 'server'...

[00:38:31] Starting server...

[00:38:31] Finished 'server' after 4.29 ms

[00:38:31] Starting 'default'...

[00:38:31] Finished 'default' after 30 μs

[00:38:31] Server started http://localhost:8080

[00:38:31] LiveReload started on port 35729

[00:38:31] Running server

[00:38:32] gulp-imagemin: Minified 1 image (saved 3.7 kB - 9.7%)

至此咱們已經把項目中須要的東西搞的差很少了，如今惟一不足的一點就是，咱們前端中要儘可能的減小http請求數，咱們寫完項目的時候會有好多的css文件，好多的js文件，咱們有必要合併一下

12、合併文件

安裝模塊gulp-concat

cnpm i gulp-concat -S

此處必須說明的是，你們在合併的時候必定要注意一下合併文件的順序，不然會出現順序錯亂的狀況，此處不作說明，只寫簡要代碼，你們能夠根據需求實現此功能

簡易代碼以下

var concat = require('gulp-concat')

gulp.task('contactcss', function () {

    gulp.src(['1.css', '2.css', '3.css', '!4.css']) // 合併1,2,3.css,不包括4.css

        .pipe(concat('app.css'))

        .pipe(gulp.dest('dist/css'))

})

gulp.task('contactjs', function () {

    gulp.src(['1.js', '2.js', '3.js', '!4.js']) // 合併1,2,3.js,不包括4.js

        .pipe(concat('app.js'))

        .pipe(gulp.dest('dist/js'))

})