前端工程化講解

1、什麼叫作前端工程化

       在過去前端開發一直沒有完善的一些代碼處理等工具來輔助開發，而nodejs火起來以後，不少基於node環境的工具誕生以後對前端開發形成了衝擊，慢慢的，使用這些工具來完成項目的搭建和開發這樣的方式被成爲前端工程化

2、爲何使用工程化來開發項目

        如今的項目無論從規模仍是複雜度上都有很大的提升，因此，如何能快速的搭建環境，以及高效的代碼管理，後期處理成爲了衡量前端工程師技術的一個標準

3、工程化以後能幫助咱們作到什麼？

        構建環境變得簡單和自動化，代碼的壓縮合並，模塊化，抽離都能一步完成，減小了後期處理成本。

4、現有的工程化工具

       目前市場上有不少自動化工具供咱們選擇： grunt、gulp都是自動化構建工具，webpack是模塊化打包工具，bower、npm是包管理工具

5、Gulp的使用方式

       gulp是一款目前比較流行的基於流的自動化構建工具，由於gulp是運行在nodejs中，因此說也遵循 CommonJS模塊化規範，gulp的使用就是經過建立任務和執行任

務來完成

關鍵方法:

      1. gulp.task()建立任務

      2. gulp.src()查找資源文件

      3. gulp.dest()輸出文件

      4. gulp.watch()監聽文件內容變化

      5. .pipe()能夠對文件進行處理

gulp提供的只是查找文件，監聽文件，處理後輸出文件，可是如何處理都不屬於gulp的功能範疇

6、工程化的實現

       在這裏，咱們將項目的工程化，與現實中的建築項目開發來作一個對比；

       1. 項目選址，找一塊能使用的好地段的地皮準備進行項目的開發

           在電腦上某一個地方創建項目目錄準備進行開發

       2. 進行信息備案：建築名稱，佔地，用處，材料，規模等等...

           在項目中執行npm init 建立package.json的文件，標註項目的相關信息

       3. 找建築公司承包項目的開發

           選擇gulp + gulp-webpack + npm 進行項目的開發

       4. 建築公司的工人入駐工地

           全局安裝gulp ：npm install gulp --global

           在項目中安裝gulp依賴：npm install gulp --save-dev ( -D )

       5. 建築圖紙，材料進入工地

           創建開發目錄以及依賴等等

       6. 對工人根據工種分隊，創建完善的任務發佈機制（微信羣聊）

           創建gulpfile.js文件，在這個文件裏發佈任務，經過命令行來執行這些任務

       7.項目完成後......

7、工程化的詳細實現

      1. 若想要一個熱更新服務器

          npm i gulp-webserver -D

      2. 配置sass開發環境

          由於sass並不能被瀏覽器直接識別，須要進行編譯，編譯成css後再引入，sass的底層是ruby，在node中咱們須要使用node-sass的工具來幫助編譯

          先安裝node-sass@4.0.0

              npm install -g node-sass@4.0.0

              npm install node-sass@4.0.0 -D

          再安裝gulp中的編譯sass的工具

              npm install gulp-sass -D

          注意，在編譯sass的時候，一保存就報錯，在編譯就行了，爲何？

          緣由是設備有的時候反應不過來，按下保存按鈕的時候，這個時候gulp-sass編譯sass的時候，其餘的模塊任務已經運行了

          解決方法：在編譯sass的位置報上一個setTimeout

          注意，在sass裏進行模塊化開發纔是王道

      3. 合併css文件

          由於用sass開發後，自己能夠模塊後後在一個模塊中引入另外一個sass模塊。最後編譯出來的就是完整的css。

          可是由於有的時候，一些模塊是別人寫的，咱們不知道怎麼引入，只好合併到一塊兒

          npm install -D gulp-concat

      4. css兼容處理

          雖然在移動端中瀏覽器內核都是webkit，可是咱們的css依然要加前綴，再說彈性盒，彈性盒的語法是有兩個版本，兩個版本的語法基本是徹底不同的

          [codepen](codepen.io)是一個神奇的網站，咱們能夠在線寫代碼，還能夠作css兼容，還能夠找一些好看的效果來學習

      5. js模塊化編譯打包

          npm install gulp-webpack -D

          用babel編譯es6 ，用gulp-rename更名字，用gulp-uglify壓縮

8、demo

　　　　const gulp = require("gulp")

　　　　const concat = require('gulp-concat')//合併

　　　　const cleanCSS = require('gulp-clean-css');//壓縮css

　　　　const autoprefixer = require('gulp-autoprefixer');//css兼容

　　　　const webserver = require("gulp-webserver")//熱更新模塊

　　　　//熱更新服務的任務

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

　　　　　　gulp.src('./').

　　　　　　pipe(webserver({

　　　　　　host:"localhost",

　　　　　　port:9000,

　　　　　　livereload :true , //是否熱更新

　　　　　　directoryListing :true

　　　　　　}))

　　　　})

　　　　const sass = require('gulp-sass')//處理sass的模塊

　　　　gulp.task('sass',function () {//編譯sass的任務

　　　　　　// setTimeout(function(){

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

　　　　　　　　pipe(sass({outputStyle:'compressed'}).on('error', sass.logError))

　　　　　　　　.pipe(concat('index.css'))

　　　　　　　　// .pipe(cleanCSS({compatibility: 'ie8'}))

　　　　　　　　.pipe(autoprefixer({

　　　　　　　　　　browsers: ['last 2 versions'],

　　　　　　　　　　cascade: false

　　　　　　　　}))

　　　　　　　　.pipe(gulp.dest("./build/css"))

　　　　　　// },200)

 　　　　

})

　　　　//js處理

　　　　const webpack = require('gulp-webpack')

　　　　const uglify = require('gulp-uglify');

　　　　const rename = require('gulp-rename')

　　　　gulp.task("packjs",function(){

　　　　　　gulp.src("./src/js/index.js")

　　　　　　.pipe(webpack({

　　　　　　　　output:{

　　　　　　　　　　filename:'index.js'

　　　　　　　　　　},

　　　　　　　　module:{

　　　　　　　　　　loaders:[

　　　　　　　　　　　　{

　　　　　　　　　　　　　　test:/\.js$/,

　　　　　　　　　　　　　　loader:"babel-loader",

　　　　　　　　　　　　　　query:{

　　　　　　　　　　　　　　　　presets:['es2015']

　　　　　　　　　　　　　　}

　　　　　　　　　　　　}

　　　　　　　　　　]

　　　　　　　　}

　　　　　　}))

　　　　　　.pipe(uglify())

　　　　　　.pipe(rename({

　　　　　　　　suffix: ".min"

　　　　　　}))

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

　　　　})

　　　　//監聽sass任務

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

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

　　　　})

　　　　//監聽js任務

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

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

　　　　})

　　　　//默認任務

　　　　gulp.task('default',['sass','watch:sass','packjs','watch:js','server'])