gulp安装与使用

超、凢脫俗 2023-02-28 04:08 33阅读 0赞

# gulp #

gulp CLI 全局安装  
npm i -g gulp-cli

npm init 把项目初始化为node模块

package.json 保存项目依赖node模块的信息

1.  运行依赖：项目运行必须的
2.  开发依赖：开发项目所需要 --save-dev

npm i --save-dev gulp

gulp 不再支持同步

##### 流 #####

数据一块一块的从源头流出， 流入数据可以是无限的

watch 监听文件变化，触发task

Browdersync 和服务器建立 webdocket连接

browder-sync

### 目录结构 ###

app  
dist  
gulpfile.js

### 第一个应用 ###

var gulp = require('gulp');
    gulp.task('hello', function(done) { 
        console.log('Hello World!');
        done()
      });

4种匹配模式：

\*.scss ： \* 号匹配当前目录任意文件，所以这里 *.scss 匹配当前目录下所有scss文件  
\*\*/*.scss ：匹配当前目录及其子目录下的所有scss文件。  
!not-me.scss ：！号移除匹配的文件，这里将移除not-me.scss  
\*.+(scss|sass) ：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。

### 执行预处理 ###

gulp.task('sass', function(){ 
      return gulp.src('source-files')
        .pipe(sass()) // Using gulp-sass
        .pipe(gulp.dest('destination'))
    });

### 清理生成文件 ###

var del = require(‘del’);  
gulp.task(‘clean’, function() \{  
del(‘dist’);  
\});

### 监听Sass文件 ###

gulp.task('watch', function(){ 
      gulp.watch('app/scss/**/*.scss', ['sass']);
      // Other watchers
    })

### 使用Browser Sync自动刷新 ###

browser-sync --save-dev

var browserSync = require('browser-sync');

# Brower依赖管理 #

独立，可复用的代码包

npm i -g bower

# 脚手架Yeoman #

npm i -g yo

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 gulp安装与使用

gulp gulp CLI 全局安装 npm i -g gulp-cli npm init 把项目初始化为node模块 package.json 保存项目依赖no

超、凢脫俗/ 2023年02月28日 04:08/ 0 赞/ 34 阅读

相关 gulp安装&简单使用

一、简介 gulp是前端开发过程中，自动化构建工具。不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。 gulp是基于Nodejs的自

拼搏现实的明天。/ 2023年02月22日 07:44/ 0 赞/ 1 阅读

相关 gulp的安装

一、安装 1. 全局安装 npm install gulp --global 或者 npm install gulp -g 2

﹏ヽ暗。殇╰゛Y/ 2023年02月09日 14:19/ 0 赞/ 38 阅读

相关前端工具gulp的使用与介绍

一、gulp的基本能力主要是文件合并gulp-concat、文件压缩gulp-uglify、给文件生成版本号gulp-rev、文件重命名gulp-rename

亦凉/ 2022年05月29日 00:15/ 0 赞/ 246 阅读

相关 gulp 使用

1、安装node.js 2、全局安装 gulp npm install --global gulp 3、进入文件局部安装 gulp npm

傷城~/ 2022年05月24日 07:24/ 0 赞/ 237 阅读

相关如何安装gulp

1、安装 gulp C:\Users\Administrator.USER-0GUONPPBHK>cnpm install --global gulp Dow

傷城~/ 2022年05月22日 05:07/ 0 赞/ 257 阅读

相关什么是Gulp？如何使用Gulp

什么是Gulp？如何使用Gulp Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用gulp你可

淡淡的烟草味﹌/ 2022年05月14日 01:30/ 0 赞/ 414 阅读

相关 gulp的安装与使用、sass的正确使用总结

gulp的安装步骤 window下哪个命令能够进入命令行窗口：cmd 1、先安装nodejs 2、全局安装gulp 打开cmd命令行窗口安装命令： npm i

「爱情、让人受尽委屈。」/ 2021年12月18日 23:34/ 0 赞/ 558 阅读

相关 node、npm、gulp安装

1、先安装node.js ，官网下载地址：https://nodejs.org/en/ 2、安装完node之后，npm自动就安装了。可以直接在visual studio co

矫情吗；*/ 2021年11月17日 10:28/ 0 赞/ 429 阅读

相关 gulp的安装与使用

当时我是第一次使用，中途有点小挫折，现在来说说我的安装和使用过程：说之前，我先附上两个参考链接： 1.https://segmentfault.com/a/1190

浅浅的花香味﹌/ 2021年09月15日 01:12/ 0 赞/ 475 阅读