美文网首页
3分钟学会gulp自动化构建工具

3分钟学会gulp自动化构建工具

作者: 码农随想录 | 来源:发表于2017-08-25 20:40 被阅读47次

构建环境


1. 全局安装 gulp

$ npm install --global gulp

2. 创建GulpDemo文件夹且进入文件夹

$ mkdir GulpDemo && cd GulpDemo

3. 在项目中引导创建一个package.json文件

$ npm init
package.json

4. 作为项目的开发依赖(devDependencies)安装

$ npm install --save-dev gulp

5. 在项目根目录下创建一个名为 gulpfile.js 的文件并打开此文件

$ touch gulpfile.js && open gulpfile.js

6. 在gulpfile.js 的文件中以下代码

const gulp = require('gulp');

/**
 * 定义一个任务
 * 第一个参数为任务名
 * 第二个参数为任务体
 */
gulp.task('hello', function(){
    console.log('hello yangxiaoping');
    //这里编写一些重复性的流程
});

7. 运行hello任务

$ gulp hello
运行结果

相关文章

  • 相关文章记录

    1.gulp构建工具相关信息 前端自动化构建工具gulp记录Gulp.js-livereload 不用F5了,实时...

  • JavaScript学习笔记(三十六)-- GULP

    GULP gulp 是一个项目开发的 自动化打包构建工具 基于 node 环境来运行的 什么是自动化打包构建工具 ...

  • gulp和webpack的理解

    gulp和webpack都是自动化构建工具。 两者不同点: 1、gulp 是基于流的自动化构建工具, 通常以管道的...

  • gulp入门教程

    gulp是前端的自动化构建工具,gulp的出现是希望能取代grunt,成为最流行的前端自动化构建工具,它与grun...

  • 1,node.js

    自动化构建工具 gulp webpack grunt gulp--构建项目,压缩合并处理,依赖于 gulpf...

  • gulp 基本的使用

    今天说说自动化构建工具gulp的使用,gulp其实是一个非常简单的自动化构建工具,它的作用有编译代码、压缩代码、热...

  • ES6项目构建方法

    任务自动化(gulp) gulp:自动化构建工具;任务自动化,就是说,尽量不使用人工,使用工具自动操作一些任务;g...

  • gulp

    gulp解释 GULP 是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。GULP 是 基 于 Nod...

  • 『前端工程化』gulp(gulp3 && gul

    Gulp 什么是Gulp Gulp是基于Node.js的构建工具,我们使用它来集成前端开发环境,来构建自动化工作流...

  • gulp总结

    gulp gulp 是基于stream的自动化构建工具 官网 https://www.gulpjs.com.cn/...

网友评论

      本文标题:3分钟学会gulp自动化构建工具

      本文链接:https://www.haomeiwen.com/subject/xqdcgttx.html