gulp自己操作之后的步骤

原创 2018年04月17日 21:02:38
1.安装node.js和gulp
2.安装好之后,cmd 命令去检查两个版本以及npm的版本
nulp -v和npm -v分别检查对应的版本,node.js百度,忘了,有点尴尬。。。。
3.npm 初始化:npm init,一直按回车键就可以,参数有的可填可不填,一直到yes
在文件夹下有packahe.js 如下图:
4.全局安装gulp : npm install gulp -g 本地安装gulp:npm install gulp --save-dev
本地安装之后如图:

5.在根目录下创建gulpfile.js,文件名必须是gulpfile
6.在js中测试,用gulp+任务名测试,如图:
gulp前端自动化构建工具,用来压缩,合并文件之类的操作
1.复制任务还是执行gulp say(gulp+任务名)
gulp.src(globs[, options])输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。
gulp.dest(path[, options]):能被 pipe 进来,并且将会写文件。并且重新输出(emits)所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。

当你在src的index.html进行操作完时,要在命令行里再次执行gulp,即gulp say(gulp+任务名),那么dist文件夹里的index.html也会跟着变动,但是很麻烦,所以我们需要让其自动跟着变化!!
2.监视任务watch:
gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb]):监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。

一,命令行:npm install gulp-scss如图


基于gulp编写的一个简单实用的前端开发环境

自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-11 19:53:56
  • 692

如何编写一个gulp插件

很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化。 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gu...
  • x333vxhl
  • x333vxhl
  • 2017-02-08 18:59:36
  • 251

gulp顺序执行任务

gulp顺序执行任务在gulp中定义多个任务,可能一个任务要依赖其他某个任务完全结束后才能开始进行,比如,我们先定义两个任务,一个coffee任务,一个clean任务,coffee用于编译coffee...
  • coolcaosj
  • coolcaosj
  • 2015-08-31 10:54:40
  • 5200

使用gulp构建一个项目

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、...
  • zch681990
  • zch681990
  • 2016-06-01 16:46:23
  • 5314

gulp插件中需要替换的几个文件

  • 2016年07月31日 16:07
  • 4KB
  • 下载

使用gulp 完成前端自动化

刚出来实习,刚开始第一个项目就被深深的伤害到了,项目进度缓慢,在一些很琐碎的地方耗费了大量时间,就写css时: 量像素->切换到sublime编辑器->写css->刷新页面->再切换..泪奔,入了前端...
  • qq_33236453
  • qq_33236453
  • 2016-04-24 16:03:25
  • 658

学习安装gulp前端自动化工具步骤流程

首先,安装所需要的插件 yo  bower gulp三个工具    npm install -g yo bower gulp再次,安装gulp所需要的generator-gulp-webapp,这个和...
  • itpinpai
  • itpinpai
  • 2015-11-11 16:51:00
  • 4585

node.js升级造成gulp无法使用的解决问题

node.js升级造成gulp无法使用的解决问题 解决方案:   1.升级gulp某个低版本的模块可能是('graceful-fs','glob'),我造成无法使用的原因是graceful...
  • u011147065
  • u011147065
  • 2017-10-16 14:30:47
  • 406

gulp-用gulp做一个略完整的前端打包工作

我们的官网要改版,会从以前的单一产品变成系列产品的官网,也就是现在的官网会是之后官网的一个子模块。 趁着这个机会,正好重新梳理了一下结构。加上罪恶之主管的一些要求,具体的需求如下: 分模块...
  • m0_37978717
  • m0_37978717
  • 2017-06-23 10:10:57
  • 869

gulp压缩代码之后,不报错,没有压缩文件

检查匹配的路径应该是匹配的路径有问题
  • like_jack
  • like_jack
  • 2017-12-22 16:23:28
  • 161
收藏助手
不良信息举报
您举报文章:gulp自己操作之后的步骤
举报原因:
原因补充:

(最多只允许输入30个字)