gulp使用流程

author author     2022-09-07     681

关键词:

1.全局安装gulp

  $ npm install --global gulp

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

  $ npm install --save-dev gulp

3.在项目的根目录下创建gulpfile.js文件(文件名不得变更)

  文件内容  例:

    var  gulp = require("gulp"),
      livereload = require("gulp-livereload"),
      uglify = require("gulp-uglify");

    gulp.task("minify",function(){
      gulp.src(‘js/*.js‘)
      .pipe(uglify())
      .pipe(gulp.dest("build/js/"));
    });

    gulp.task("default",["minify"],function() {
      console.log("运行默认")
    })
    var watcher = gulp.watch(["js/*.js"]);
    watcher.on("change",function(ev){
      console.log("File"+ev.path+"发生")
    });

4.安装所需插件

  npm install --save-dev gulp-livereload gulp-uglify

5.运行gulp

  $ gulp

如下图  gulp运行成功

技术分享

 













与你相遇好幸运,使用gulp流程化typescript后端开发

tsc--init{   "compilerOptions":{       "module":"commonjs",       "target":"es5",     &nbs 查看详情

gulp基本使用

1.安装npminstall-ggulp-cli&&npminstall--save-devgulporwithyarnyarnglobalgulp-cli&&yarnaddgulp2.使用基本流程1.gulpcli启动命令行工具2.本地gulp3.gulpfile构建的命令文件4.gulpplugins进行合并,修改,组装文件的插件//安装件13.简单使用//ya 查看详情

gulp自动化构建的基本使用(代码片段)

...自动化,从而减少你所浪费的时间、创造更大价值。基本使用安装gulpnpmigulp-D在项目根目录下创建gulpfile.js文件functiondefaultTask(cb)//在此处写默认任务的代码cb() 查看详情

gulp使用学习记录

...一个个链接的管道(pipe)。 1.什么是src和pipe?如下使用到了src与pipe gulp.src(‘spec/google.spec.js‘)    .pipe(jasmine());我们先看一个unix命令: c 查看详情

前端工作流程自动化——grunt/gulp自动化

...再看看实现同样功能的配置代码:  作者本人之前一直使用Grunt来做自动化构建的,在 查看详情

gulp基本用法

...一周中最最最期待的周五啦啦~~~这几天一直在研究gulp的使用方法,今天抽时间来整理一下基本步骤。gulp的使用流程: 安装nodejs->安装git(方便调出命令窗口,可选) ->全局安装gulp->项目安装gulp以及gulp插件->配... 查看详情

gulp安装与使用

...node.js 流(stream)的一个前端自动化构建工具,可以使用它构建自动化工作流程,简化我们工作量,让我们把重点放在功能的开发上,从而提高我们的开发效率和工作质量 我们可以用gulp自动刷新网页,对sass进行预处理、... 查看详情

使用gulp构建一个项目

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功... 查看详情

如何使用节点一次安装多个 gulp 包?

】如何使用节点一次安装多个gulp包?【英文标题】:Howtoinstallmultiplegulppackagesatonceusingnode?【发布时间】:2016-04-2715:20:28【问题描述】:我刚刚切换到gulp任务运行器来自动化我的工作流程,但是每当我想开始一个新项目时都会出... 查看详情

前端笔试题之什么是gulp

...Gulp是基于node.js的一个前端自动化构建工具,开发这可以使用它构建自动化工作流程(前端集成开发环境)。 使用gulp你可以简化工作量,让你把重点放在功能的开发上,从而提高你的开发效率和工作质量。 例如:你可以... 查看详情

git和gulp使用

目录目录2第1章工作流程4第2章Shell和vi42.1什么是shell42.2shell分类52.3认识bash这个shell52.4vi编辑器6第3章版本控制83.1关于版本控制83.2本地版本控制系统93.3集中式版本控制系统93.4分布式版本控制系统10第4章Git124.1Git工作原理124.2Git安... 查看详情

Gulp-nodemon 和监视任务

...【发布时间】:2016-07-2205:17:12【问题描述】:我正在尝试使用gulp和nodemon创建构建流程。目的是观察sass文件并将其编译为css,并在服务器文件更改时重新启动节点应用程序。我的gulpfile.js:gulp.task(\'sass\',function()returngulp.src(sassFile... 查看详情

使用gulp构建一个项目

...psgulp-autoprefixer您还可以直接学习以下模块:安装Node和gulp使用gulp压缩JS使用gulp压缩CSS使用gulp压缩图片使用gulp编译LESS使用gulp编译Sass使用gulp构建一个项目并将之前所有章节的内容组合起来编写一个前端项目所需的gulp代码。若你... 查看详情

使用 Gulp.js 将版本化和构建(缩小)文件正确提交到 GitHub

】使用Gulp.js将版本化和构建(缩小)文件正确提交到GitHub【英文标题】:Correctlycommittingversioned,andbuilt(minified)filestoGitHubwithGulp.js【发布时间】:2015-10-0314:39:53【问题描述】:背景信息我正在编写一个小型JavaScript库,如果其他人... 查看详情

学写网站前端配置之glup(代码片段)

前端使用gulp来自动化开发流程。gulp会非常方便进行前端管理。安装gulp:npminstallgulp-g#将gulp安装至全局因为在本地需要使用require的方式gulp。因此也需要在本地安装一份:npminstallgulp--save-dev #将gulp安装至本地,并保存至package.... 查看详情

gulp使用案例

1、gulp配置://引入gulpvargulp=require(‘gulp‘);varwatch=require(‘gulp-watch‘),//导入所有gulp需要的模块spriter=require(‘gulp-css-spriter‘),spritesmith=require(‘gulp.spritesmith‘),imagemin=require(‘gulp-imagemin‘),png 查看详情

gulp-less使用

简介:  使用gulp-less插件将less文件编译成CSS。1、安装gulp-less在命令行里使用npminstallgulp-less--save-dev;2、配置gulpFile.js2.1基本使用vargulp=require(‘gulp‘),//获取gulp模块less=require(‘gulp-less‘);//获取gulp-less插件gulp.task(‘testLess‘, 查看详情

gulp常用插件之gulp-notify使用(代码片段)

更多gulp常用插件使用请访问:gulp常用插件汇总gulp-notify这是一款gulp通知插件。更多使用文档请点击访问gulp-notify工具官网。安装一键安装不多解释npminstall--save-devgulp-notify使用例1:varnotify=require("gulp-notify");gulp.src("./src... 查看详情