工程化-gulp簡單使用實現自動化編譯

初始化項目

1. 創建gulps空文件夾
2. 進入文件夾執行npm init -y 初始化node項目
3. 執行yarn add gulp -D
4. 安裝完成修改package.json

"scripts": {
   "build": "gulp"
 },

5. 執行npx gulp --version查看版本
6. npm run build 執行gulp

配置gulp的任務

1. 初始化

1. 在根目錄下創建gulpfile.js文件

// 壓縮、混淆js
function js () {

}

// 對scss/less編譯壓縮，輸出css文件
function css () {

}

// 監聽文件的變化
function watcher () {

}

// 刪除dist目錄中的內容
function clean () {

}
exports.scripts = js
exports.styles = css
exports.default = function () {
  console.log(2)
}

2. 安裝依賴插件

1. gulp-uglify插件對js進行壓縮並混淆
2. gulp-rename 重命名插件
3. gulp-autoprefixer 對樣式進行預處理，處理瀏覽器前綴
4. gulp-sass 編譯sass
5. gulp-load-plugins
6. del

執行行命令安裝上面的插件
yarn add gulp-sass node-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del -D

3. 配置js混淆

1. 依賴安裝完成後就可以在gulpfile.js中引用了
   只需要引入 gulp-load-plugins其他插件都以它的屬性的形式引用

const { src, dest, series, watch } = require('gulp')
const plugins = require('gulp-load-plugins')()

2. 配置js混淆
   記得要傳cb，否則執行混淆的時候會報錯

// 壓縮、混淆js
function js (cb) {
  // 原文件路徑
  src('js/*.js')
    // 下一個處理環節: 混淆js並輸出到dist目錄下的js目錄
    .pipe(plugins.uglify())
    .pipe(dest('./dist/js'))
  cb()
}

3. 在根目錄下創建js目錄並創建index.js文件，裏面隨便寫些js
4. 執行npx gulp scripts進行js文件混淆和壓縮

4. 配置clean方法

const del = require('del')
// 刪除dist目錄中的內容
function clean (cb) {
  del('./dist')
  cb()
}
exports.clean = clean

執行npx gulp clean 測試下看能否刪除dist目錄

3. 配置css方法

1. 在根目錄下創建css目錄並在下面創建index.scss文件,隨便寫些樣式
2. 配置方法

// 對scss/less編譯壓縮，輸出css文件
function css (cb) {
  src('css/*.scss')
    .pipe(plugins.sass({outputStyle: 'compressed'}))
    .pipe(plugins.autoprefixer({
      casecade: false,
      remove: false
    }))
    .pipe(dest('./dist/css'))
  cb()
}

3. 修改package.json

"devDependencies": {...},
"browserslist": [
  "last 2 Version",
  "> 2%"
]

4. 執行npx gulp styles

4. 配置監聽方法

// 監聽文件的變化
function watcher () {
  watch('js/*.js', js)
  watch('css/*.scss', css)
}
exports.default = series([
  clean,
  js,
  css,
  watcher
])

執行 npm run build

5. 配置瀏覽器自動刷新

1. 安裝依賴

yarn add browser-sync -D

2. 配置

• 引入

const browserSync = require('browser-sync')
const reload = browserSync.reload

• 增加服務

// server任務
function serve (cb) {
  browserSync.init({
    server: {
      baseDir: './'
    }
  })
  cb()
}

• 重新配置js，css

function js (cb) {
  src('js/*.js')
    .pipe(plugins.uglify())
    .pipe(dest('./dist/js'))
    .pipe(reload({stream: true}))
  cb()
}

function css (cb) {
  src('css/*.scss')
    .pipe(plugins.sass({outputStyle: 'compressed'}))
    .pipe(plugins.autoprefixer({
      casecade: false,
      remove: false
    }))
    .pipe(dest('./dist/css'))
    .pipe(reload({stream: true}))
  cb()
}
exports.default = series([
  clean,
  js,
  css,
  serve,
  watcher
])

• 配置完成後重新執行npm run build

腳手架工具Yeoman

快速生成腳手架工程的

使用Yeoman和已經上傳到npm的腳手架快速搭建項目

1. 安裝

npm install -g yo

2. 查看是否安裝成功

yo --version

3. 快速創建項目（npm上傳上去的已經配置好的腳手架）

imooc-gulp的腳手架名字
npm install -g generator-imooc-gulp
yo imooc-gulp

編寫自己的腳手架

1. 安裝依賴

npm install -g yo
npm install -g generator-generator
yo generator
然後根據提示填寫相關信息

2. 加入設置的腳手架名字爲generator-carol,它就會在執行目錄下生成一個generator-carol-gulp目錄
3. 修改generator-carol-gulp目錄中的package.json

// 版本號不能爲0.0.0
"version": "1.0.0"

4. 將自己配置好的gulp項目中的css、js目錄，glupfile.js,index.html,package.json文件都拷貝到generator-carol-gulp目錄下的templates目錄下
5. 修改generator-carol-gulp目錄中app目錄下的index.js

const prompt = [
  {
  	...,
  	name: 'install',
  	...
  }
]

writing () {
	this.fs.copy(
		this.templatePath('**'),
		this.destinationPath('./')
	)
}

install () {
	this.installDependencies(options: {
		bower: false
	})
}

6. 本地測試 在終端中進入generator-carol-gulp目錄，執行下面的命令將腳手架變爲本地全局

npm link

7. 測試：在本地創建一個空文件夾，然後進入該文件夾執行下面的命令，就可以快速使用腳手架創建項目了

yo carol-gulp
npm run build