gulp/requireJS/webpack 前端自動化工具

gulp

基於node的自動化構建工具

開發的時候分爲2個階段

　　開發階段：源文件進行開發

　　部署階段：源文件會被壓縮，合併，優化。

 

gulp的用處？

1  自動壓縮JS文件

2  自動壓縮CSS文件

3  自動合併文件

4  自動編譯sass

5  自動壓縮圖片

6  自動刷新瀏覽器

 

 

安裝gulp.

一、全局安裝gulp npm install gulp -g

　　 刪除gulp      npm unintsall gulp
因爲網絡常常很差，考慮把npm換成cnpm，可使用淘寶提供的鏡像服務器

下載一個淘寶的鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm是國內的會快 npm比較慢

二、 npm init 把你的項目變成一個node包 npm init -y（出現package.json）
　

三、局部安裝gulp cnpm install gulp --save-dev
　　save把文件放在node_modules裏面
　　dev 文件在package.json裏面顯示

四、建立一個gulpfile.js這個文件 必須跟package.json是同一路徑

　　

安裝依賴包

　　壓縮image文件：gulp-imagemin

　　壓縮JS文件：gulp-uglify

　　壓縮js文件時候存在ES6 須要轉譯

　　　　另外安裝依賴包爲：babel-core   babel-preset-env  babel-preset-env   gulp-babel

　　壓縮CSS文件：gulp-minify-css

　　壓縮html文件：gulp-minify-html

　　合併文件：gulp-concat

　　開啓服務器：gulp-connect

　　自刷新：gulp-livereload

 

package.json(該文件基本配置直接cnpm install安裝所有依賴包)

 

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.5.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-minify-html": "^1.0.6",
    "gulp-sass-china": "^3.1.0",
    "gulp-uglify": "^3.0.0"
  }
}

 

gulpfile.js配置

 

const gulp=require('gulp');
//壓縮頁面
const minHtml=require('gulp-minify-html');
gulp.task('minHtml',()=>{
    gulp.src('src/html/*')
    .pipe(minHtml())
    .pipe(gulp.dest('dist/html'))
    //自刷新的指向發生改變
    .pipe(connect.reload())
})

//壓縮圖片
const minImg=require('gulp-imagemin');
gulp.task('minImg',()=>{
    gulp.src('src/img/*')
    // gulp(minImg())
    .pipe(gulp.dest('dist/img'))
})

// 壓縮JS 
const minJs=require('gulp-uglify');
//將ES6轉譯爲ES5
const babel=require('gulp-babel');
//合併
const concat=require('gulp-concat');
gulp.task('minJs',()=>{
    gulp.src('src/js/*')
    .pipe(babel({
        presets:['env']
    }))
    .pipe(minJs())
    .pipe(concat('index.js'))
    .pipe(gulp.dest('dist/js'))
})

//壓縮css或者sass
const minCss=require('gulp-sass-china')
gulp.task('minCss',()=>{
    gulp.src('src/sass/*.{scss,sass}')
    .pipe(minCss({
        outputStyle:'compressed'
    }))
    .pipe(concat('index.css'))
    .pipe(gulp.dest('dist/css'))
})
// 開啓服務器
const connect=require('gulp-connect')
gulp.task('server',()=>{
    connect.server({
        root:'./',
        port:1314,
        livereload:true
    })
})
// 監聽
//當文件發生改變的時候監聽全部
gulp.task('watch',()=>{
    gulp.watch(['src/**/*'],['minCss','minJs','minHtml'])
})
gulp.task('f5',["server","watch"])

 

 

requireJs模塊化開發

1.首先引入requireJs模塊（require.js文件）

async屬性代表這個文件須要異步加載， IE不支持該屬性，只支持defer因此把defer也寫上
data-main：用於加載入口文件（當require加載完畢後，須要引進主模塊js文件）

<script src='../js/require.js' defer async='true' data-main='../js/app'></script>

 

2.使用require.config方法配置各個模塊所加載的路徑

// 爲了不過多的代碼寫在一個數組裏面致使代碼的冗長 (改模塊名爲config.js)
// 所以如下爲單獨配置模塊路徑
require.config({
    //公共路徑
    baseUrl:'../js',
    paths:{
        // AMD規範的模塊 val爲文件名
        jquery:"jquery-1.11.3.min",
        banner:"banner",
    },
    shim:{
        // 不是按照AMD規範 的模塊key爲文件名
        highcharts:{
            exports:"Highcharts"
        }
    }
})

 

 3.配置所須要用到的模塊

//由於requireJS 採用的是AMD規範所以全部依賴的模塊必須用define來定義（此例模塊名爲banner.js）
define(['jquery'],()=>{
    fn(){}
    return {
        start:fn
    }
})

 

4.配置主模塊（核心模塊）

//主模塊  引入依賴的配置文件 模塊名爲app.js
require(['config'],()=>{
    // 異步引入依賴的文件
    require(['banner','highcharts'],(banner,his)=>{
        banner.start.init()
        console.log(his)
    })
})

 

 

webpack(模塊化打包工具)

webpack:模塊打包器

一、第一步全局安裝webpack npm install webpack@3.5.3 -g
查看是否安裝 -v
二、第二步局部安裝webpack cnpm install webpack@3.5.5 --save-dev
新建一個文件webpack.config.js
檢測輸出：代碼console.log() 命令行：node webpack.config.js
命令行建立文件:mkdir

ES6模塊（須要在webpack上運行）
export:導出模塊
import：引入模塊

（JS文件導出後引入須要藉助webpack環境）

 webpack.config.js文件

　　

const webpack=require('webpack')
module.exports = {
　　entry :__dirname+'/dist/js/indexa.js',
　　output : {
　　filename :'index.js',
　　path :__dirname+'/dist/js'
}
}