工程化-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