gulp4搭建环境开发编译打包

gulp4搭建环境开发编译打包

Gulp是一个工具，可以帮助您完成Web开发的几项任务。它经常用于执行前端任务，例如：

Web服务器

保存文件时自动重新加载浏览器

使用Sass或LESS等预处理器

优化CSS，JavaScript和图像等资源

这是本文的用途,可以帮你使用学习gulp的基础知识

##全局安装gulp-cli

  npm install --global gulp-cli

进入自己项目根目录 创建package.json文件

  npm init

安装gulp

  npm initall --save-dev gulp

##确定文件夹结构

Gulp足够灵活，可以处理任何文件夹结构。在为项目调整之前，您只需了解内部工作原理。

对于本文，我们将使用通用webapp的结构：

 - app/ 
     scss/ 
     images/  
     js/  
     index.html
     index.scss 
  dist/  
  gulpfile.js  
  node_modules/ 
  package.json
  tmp

在此结构中，我们将使用该app文件夹进行开发,dist用于包含生产站点的优化文件,.tmp用于浏览器预览开发。

##编写第一个gulp任务

使用Gulp的第一步是require在gulpfile中使用它

 gulpfile.js
     const gulp=require('gulp');

require语句告诉Node查看node_modules名为的包的文件夹gulp。找到包后，我们将其内容分配给变量gulp

现在可以开始编写gulp任务了 在这里你会学到gulp src() pipe() dest()等api的作用

##编译sass

src下创建index.scss

src/scss下创建home.scss以及globals.scss

home用来写页面所需的样式 globals用来导入home以及未来创建的scss,利用sass带的@import导入

 home.scss
     body{
           h1{
                  background: #ccc; 
              } 
          }

 globals.scss
         @import 'home';

index.scss导入globals

 index.scss
         @import "scss/globals"

我们可以在一个名为gulp-sass的插件的帮助下将Sass编译为Gulp中的CSS 。

 bash
     npm install gulp-sass --save-dev

require从node_modules文件夹中获取gulp-sass,从gulp中导入 src,dest;

src创建流,从文件中读取对象,dest创建src导入的对象写入文件系统中

 gulpfile.js 
     const {src,dest}=require('gulp');
     const sass=require('gulp-sass');

编写编译sass

 gulpfile.js
 
         const scss = () =>src('src/index.scss')
                                   .pipe(sass())
                                   .pipe(dest('.tmp/'));
         exports.scss = scss;

运行gulp scss

 bash 
    gulp scss

##编译js es6 7转es5

src/js下创建文件home.js,和page.js

 home.js 
 //随便写句es6
 let x = () => alert('成功');
     x();

需要安装gulp-babel 以及babel-preset-env

 bash
     npm install gulp-babel --save-dev
     npm install babel-preset-env --save-dev

和scss同理 require找到gulp-babel模块
这里我们了解一下*和!
js/*.js代表js下所有后辍名为.js的文件
匹配所有的js的文件后,如果有某个文件不想src取到,文件前加!

gulpfile.js
     const babel=require('gulp-babel'); 
     const js = () =>
          src(['src/js/*.js', '!src/js/page.js'])
           .pipe(babel({ 
            "presets": ['env'] 
              }))
            .pipe(dest('.tmp/js'))
      exports.js = js

 bash
     gulp js

##图片转移进.tmp临时文件

同上,只需要src和dest

 gulpfile.js
 const images = () =>
   src('src/images/*.+(png| jpg | jpeg | gif | svg)', 'src/images/*/*.+(png| jpg | jpeg | gif | svg)')
   .pipe(dest('.tmp/images')); 
 exports.images = images

终端输入gulp images

 bash 
     gulp images

##html动态插入js文件

安装插件gulp-inject

 bash
     npm install gulp-inject --save-dev

负责告诉gulp js文件从何处插入

编写gulpfile.js

 gulpfile.js 
 const inject = require('gulp-inject'); 
     const html=()=> 
         src('./src/index.html') 
         .pipe(inject(src(['.tmp/js/*.js'], { read: false, }), {
             ignorePath: ['.tmp'], //去除tmp
             addRootSlash: false, //去除/
           }))
         .pipe(dest('.tmp/'))
 exports.html=html;

 bash 
     gulp html

至此,tmp临时文件搭建完毕

##搭建本地服务器环境

需要插件browser-sync

 bash
     npm install borwser-sync --save-dev

运行文件根目录为临时文件.tmp

 gulpfile.js 
 const browserSync = require('browser-sync').create(); 
     const watchs = () => 
       browserSync.init({
           server: { 
             baseDir: '.tmp' 
           }
         }) 
 exports.watchs = watchs

##watch监听文件

gulp自带的watch监听功能,每当文件修改,运行某函数

 gulpfile.js 
 const { src, dest,watch } = require('gulp'); 
 const watchs = () => { 
         watch('src/js/*.js', js) 
         watch('src/scss/*.scss', scss) 
         watch('src/index.html', html)
         watch(['src/images/*.*','src/images/*/*.*'],images) 
         browserSync.init({ 
             server: { baseDir: '.tmp' } 
             }) 
             }
 exports.watchs = watchs

f5手动刷新很麻烦,更改之前的scss,js等函数,利用browser-sync实现更改自动刷新

 gulpfile.js 
 let scss = () => 
     src('./src/index.scss') 
     .pipe(sass()) 
     .pipe(dest('./.tmp/')) 
     .pipe(browserSync.reload({
      stream: true 
     })); 
 const images = () => 
     src(['src/images/*.+(png| jpg | jpeg | gif | svg)', 'src/images/*/*.+(png| jpg | jpeg | gif | svg)']) 
     .pipe(dest('.tmp/images'));         
     .pipe(browserSync.reload({ 
      stream: true }) 
            ) 
 const html = () => 
     src('./src/index.html') 
     .pipe(inject(src(['.tmp/js/*.js'], { read: false, }),{ 
     ignorePath: ['.tmp'],        //去除tmp 
     addRootSlash: false        / /去除/ 
     })) 
     .pipe(dest('.tmp/')) 
     .pipe(browserSync.reload({ 
     stream: true 
     }))

运行之前的wathcs函数

 bash 
     gulp watchs

更改app下的文件,你会发现浏览器已经成功自动刷新了

推荐把众多函数expots成一句
series()顺序执行
parallel()并发运行

 gulpfile.js 
         const { src, dest, watch, series,parallel } = require('gulp'); 
         exports.serve = series(parallel(js, scss, images), html, watchs);

 bash 
     gulp serve

至此,本教程已经完成了一半,一个单页面项目的基本构建完成

##打包压缩发布

线上项目为了提高访问速度,我们需要压缩以及合并文件
安装gulp-cssnano        gulp-imagemin           gulp-concat         gulp-uglify

 bash 
     npm install gulp-cssnano  --save-dev 
     npm install gulp-imagemin  --save-dev 
     npm install  gulp-concat   --save-dev 
     npm install  gulp-uglify --save-dev

 gulpfile.js 
 const cssnano = require('gulp-cssnano') //压缩css 
 const imagemin = require('gulp-imagemin'); //图片压缩
 const concat = require('gulp-concat') //合并js 
 const uglify = require('gulp-uglify') //压缩js
 
 const baleJs = () => 
   src('src/js/*.js') 
   .pipe(concat('index.js')) 
   .pipe(babel({
    "presets": ["env"] 
   })) 
   .pipe(uglify())//压缩js 
   .pipe(dest('dist/')) 
 const baleScss = () => 
   src('./src/index.scss') 
   .pipe(sass()) 
   .pipe(cssnano())//压缩css 
   .pipe(dest('./dist/'))
 const baleImages = () => 
   src(['src/images/*', 'src/images/*/*']) 
   .pipe(imagemin())//压缩图片 
   .pipe(dest('dist/images')) 
 const baleHtml = () => 
   src('src/index.html') 
   .pipe(inject(src(['dist/index.js']), { 
    ignorePath: ['dist'], //去除dist 
    addRootSlash: false, //去除/ 
   })) 
   .pipe(dest('dist/'))

打包之前要删除原先的dist文件 安装npm的del

 bash 
    npm install del --save-dev

 gulpfile.js 
    const del=requirt('del'); 
    const naleDelete=()=>del(['dist'])

将打包逻辑组合

 gulpfile.js 
    exports.bale = series(naleDelete, parallel(baleJs, baleScss, baleImages), baleHtml)

 bash 
    gulp bale

源码https://github.com/heweidaren/gulp-demo/tree/master