【前端工具】gulp构建工具的基本使用

2019-03-22 本文已影响71人 hijackli

gulp

gulp是什么？

gulp是前端开发中经常使用的自动化构建工具。自动化构建又是什么？
简单来说，一个完整的项目需要经历两个过程：开发阶段development和项目上线阶段production。在程序中又常称作开发环境和生产环境，其实并没有多少含义，只是为了理清业务逻辑而已，了解就好。
在开发环境我们的项目代码需要把less转成css(因为less不能直接被浏览器解析)，需要给css3中的属性添加前缀，需要开启服务器自动监听文件的变化(改了一个宽度颜色啊，改了一个函数方法啊等等)，然后自动刷新页面(减少手动操作，提高开发效率)。等等一些需要在开发阶段解决的问题
在生产环境我们的项目代码也要进行许多处理，比如代码的压缩、图片压缩、去除调试语句、提取公共代码等等。
所以，自动化构建简单来说就是进行上面的操作的，而自动化构建工具就集成了这一大堆的操作，大大提高了开发效率。

那我们一起来用gulp构建一个简单的项目吧

项目源码地址：https://github.com/HiJackLi/gulp-gulpfile.js 觉得不错给个小心心
gulp中文网：https://www.gulpjs.com.cn/
gulp官网：https://gulpjs.com/

提前操作：创建项目基本结构

基本目录结构

第一步：安装gulp

npm install gulp -g 安装全局gulp
以下都以gulp@3.9.1版本为例，4.x版本请参考其他文档。如果不小心下载了4版本，可以使用npm install gulp@3.9.1 -g操作来覆盖之前的版本
npm init -y 初始化项目
npm install gulp -D 安装局部gulp依赖

第二步：在项目根目录下创建一个名为gulpfile.js文件

gulpfile.js类似webpack中的配置文件，就是配置你到底要做哪些操作。
在gulpfile.js文件中写入如下基础代码，基本含义是：加载gulp模块工具，然后创建默认任务，default是固定写法不能改变。后面的函数就是要执行的操作。而task方法就是创建任务的gulp方法。

  //gulpfile.js
  
  var gulp = require('gulp');
  
  gulp.task('default', function() {
      //将你的默认的任务操作代码放在这里
  })

还可以这样写用来把任务操作抽出

  //gulpfile.js
  
  var gulp = require('gulp');
  
  gulp.task("html", function () {}) //创建html操作任务。"html"只是名称，可以任意取
  gulp.task("css", function () {})  //创建css操作任务
  gulp.task("js", function () {})   //创建js操作任务
  
  //创建默认执行任务，执行内容是 html操作任务、css操作任务、js操作任务
  gulp.task('default', ["html","css","js"])

第三步：运行gulp

命令行执行

    $ gulp

默认的名为"default"的任务将会被运行。

第四步：创建几个基本任务

创建"default"默认任务并把任务操作分发给其他任务
创建"html"任务用于对html文件的操作
创建"css"任务用于对css文件的操作
创建"js"任务用于对js文件的操作
创建"image"任务用于对图片的操作

//gulpfile.js

    //加载gulp模块
    var gulp = require('gulp');

    // 创建html任务
    gulp.task("html", function () {
    
    })
    // 创建css任务
    gulp.task("css", function () {
    
    })
    // 创建js任务
    gulp.task("js", function () {
        
    })
    // 创建image任务
    gulp.task("image", function () {
        
    })

    //创建默认任务，默认任务正好是创建的html任务，运行gulp会自动执行默认任务
    gulp.task("default", ["html", "css", "js", "image"]);

第五步：给各个任务添加具体操作：获取文件-->输出文件

gulp.src方法含义：简单来说就是获取文件，要对哪一个文件进行操作。
gulp.pipe方法含义：gulp操作是基于流的操作，我们把整个操作过程都当作一条水管，pipe方法类似于把每一步操作放到水管中。
gulp.dest方法含义：简单来说就是文件操作完了输出到哪里。
一般我们会创建两个目录，一个是开发环境目录./src 一个是生产环境目录./dist。如果没有创建生产环境目录，gulp操作完成之后会自动创建目录，并且dist目录下输出的文集及目录也会按照输出的地址自动创建。

    //路径管理 以便后续文件路径更改操作
    var folder = {
        src: "src/",
        dist: "dist/"   //生产环境的目录，如果没有创建gulp操作会自动创建dist文件目录
    }
    // 创建html任务
    gulp.task("html", function () {
        gulp.src(folder.src + "html/*")             //获取html文件
            .pipe(gulp.dest(folder.dist + "html/")) //输出文件 
    })
    // 创建css任务
    gulp.task("css", function () {
        gulp.src(folder.src + "css/*")              //获取less文件
            .pipe(gulp.dest(folder.dist + "css/"))  //输出文件
    })
    // 创建js任务
    gulp.task("js", function () {
       gulp.src(folder.src + "js/*")                //获取js文件 
            pipe(gulp.dest(folder.dist + "js/"))    //输出文件
    })
    // 创建image任务
    gulp.task("image", function () {
        gulp.src(folder.src + "image/*")             //获取图片
            .pipe(gulp.dest(folder.dist + "image/")) //输出文件
    })

第六步：给各个任务添加具体操作：压缩文件，转换less，添加css前缀，去除js调试语句

这一步骤需要gulp的插件支持，如何使用插件进行操作？
插件使用的基本过程：下载插件 --> 取到插件 --> 应用插件
下载插件

    $ npm install gulp-htmlclean    
    $ npm install gulp-imagemin
    $ npm install gulp-uglify
    $ npm install gulp-strip-debug
    $ npm install gulp-less
    $ npm install gulp-postcss autoprefixer
    $ npm install gulp-strip-debug

获取插件

// 添加如下代码
// 压缩html
// 下载插件 gulp-htmlclean
var htmlClean = require('gulp-htmlclean');   //取到插件

// 压缩图片
// 下载插件 gulp-imagemin
var imageMin = require('gulp-imagemin');

// 压缩js
// 下载插件 gulp-uglify
var uglify = require('gulp-uglify');

// 去掉js中的调试语句
// 下载插件 gulp-strip-debug
var debug = require('gulp-strip-debug');

// 压缩css 
// 下载插件 gulp-clean-css
var cleanCss = require('gulp-clean-css')

// 给css添加前缀
// 下载插件 gulp-postcss  autoprefixer
var postcss = require('gulp-postcss')
var autoprefixer = require('autoprefixer')

// less转css
// 下载插件 gulp-less
var less = require('gulp-less');

应用插件

    //更新之前的代码
    // 创建html任务
    gulp.task("html", function () {
        gulp.src(folder.src + "html/*")             //获取html文件
            .pipe(htmlClean())                      //压缩文件
            .pipe(gulp.dest(folder.dist + "html/")) //输出文件
    })
    // 创建css任务
    gulp.task("css", function () {
       gulp.src(folder.src + "css/*")               //获取less文件
            .pipe(less())                           //less转css
            .pipe(postcss([autoprefixer()]));       //添加前缀
            .pipe(cleanCss())                       //压缩css
            .pipe(gulp.dest(folder.dist + "css/"))  //输出文件
    })
    // 创建js任务
    gulp.task("js", function () {
        gulp.src(folder.src + "js/*")               //获取js文件 
            .pipe(debug())                          //清除调试语句
            .pipe(uglify())                         //压缩js文件
            .pipe(gulp.dest(folder.dist + "js/"))   //输出文件
    })
    // 创建image任务
    gulp.task("image", function () {
        gulp.src(folder.src + "image/*")            //获取图片
            .pipe(imageMin())                       //执行压缩插件
            .pipe(gulp.dest(folder.dist + "image/"))//输出文件
    })

这样基本上该有的能力都有了，但还剩一个问题没解决

第七步：开启服务器代理和自动监听文件变化并刷新页面

理清思路：gulp上开启服务器需要依赖插件，那么我们下载插件并获取到

    $ npm install gulp-connect

    // 开启服务器
    // 下载插件 gulp-connect
    var connect = require('gulp-connect')

如何开启？需要创建开启服务器的任务"server"

    //开启服务器任务
    gulp.task('server', function () {
        connect.server({
            port: "8888",           // 设置端口号，不设置默认8080
            livereload: true        //开启刷新,什么时候刷新呢？需要在各个任务函数中设置
        });
    })
    gulp.task("default", ["html", "css", "js", "image", "server"]); //默认任务中也要添加服务器任务

开启了服务器运行$ gulp就可以在http://localhost:8888/中查看我们的页面了。
接下来是监听文件变化，同样的也需要创建监听任务

    // 创建监听任务
    gulp.task('watch', function () {
        gulp.watch(folder.src + 'html/*', ['html'])  //监听html文件，一旦文件变化就执行html任务
        gulp.watch(folder.src + 'css/*', ['css'])    //监听css文件
        gulp.watch(folder.src + 'js/*', ['js'])      //监听js文件
    })
    gulp.task("default", ["html", "css", "js", "image", "server", "watch"]); //默认任务中也要添加监听任务

接下来是自动刷新，上面设置了自动刷新livereload: true,但是需要明确几点
1. 开启监听任务并不能自动刷新页面，因为监听任务只监听变化，并不会帮助自动刷新页面。
2. 自动刷新功能是开启了，但是什么时候自动刷新呢？当然是在代码内容发生更改的时候自动刷新页面
3. 所以我们在各个任务操作函数中进行添加自动刷新操作gulp.pipe(connect.reload())
4. 拿html任务举例，其余任务类似

    //更新之前的代码
    gulp.task("html", function () {
        gulp.src(folder.src + "html/*") 
            .pipe(connect.reload());             //每次文件改变刷新页面
            .pipe(htmlClean())                   //压缩文件
            .pipe(gulp.dest(folder.dist + "html/"))  
    })

第八步：针对不同环境进行操作

由于上面操作集合了开发环境和生产环境，不利于开发，下面将两者操作分开
其实就是让开发阶段做开发的事，项目上线阶段做上线的事(压缩代码等操作)
需要明确几点：
如何设置当前的操作环境，比如我就想设置一下当前是在开发环境下，可以在命令行中执行:

   $ export NODE_ENV=development    # 同样的,生产环境是production

那么如何判断当前处在什么环境呢？从而执行$ gulp进行不同环境下的任务操作
有如下方法进行判断

    var devMode = process.env.NODE_ENV == "development"; //判断环境变量

所以就可以在各个任务函数中判断当前所处环境，再进行不同操作，如下，以html任务为例，其他任务同理

    //更新之前的代码
    gulp.task("html", function () {
        var page = gulp.src(folder.src + "html/*")  
                        .pipe(connect.reload());     //每次文件改变刷新页面
        if (!devMode) {                              //如果是生产环境
            page.pipe(htmlClean())                   //压缩文件
        }
        page.pipe(gulp.dest(folder.dist + "html/"))  
    })

这样整个项目利用gulp的简单构建就完成了。如果有错误欢迎指出，共同学习。以上都是本人手敲的，如果觉得不错不妨点个小心心

【前端工具】gulp构建工具的基本使用

gulp是什么？

那我们一起来用gulp构建一个简单的项目吧

提前操作：创建项目基本结构

第一步：安装gulp

第二步：在项目根目录下创建一个名为gulpfile.js文件

第三步：运行gulp

第四步：创建几个基本任务

第五步：给各个任务添加具体操作：获取文件-->输出文件

第六步：给各个任务添加具体操作：压缩文件，转换less，添加css前缀，去除js调试语句

第七步：开启服务器代理和自动监听文件变化并刷新页面

第八步：针对不同环境进行操作

猜你喜欢

热点阅读