gulp 前端构建工具入门

时间:2022-07-14 09:52:36

gulp 前端构建工具入门

标签(空格分隔): gulp


1. 安装gulp

npm i -g gulp

gulp 前端构建工具入门

2. 创建gulp项目

2.1 Hello world

使用npm init初始化项目文件夹。

使用npm install --save-dev gulp本地安装gulp依赖。

根目录下新建gulpfile.js

按照编程的尿性,先试一下hello world:

var gulp = require('gulp');

gulp.task('hello', function() {
console.log('Hello world');
});

然后在命令行执行:gulp hello

gulp 前端构建工具入门

2.2 编译sass

首先项目根目录新建src文件夹,其下新建scss文件夹和css文件夹。

安装gulp-sass

npm install --save-dev gulp-sass

scss文件夹下新建sass文件:

$width: percentage(5 / 7);

.test {
width: ceil($width);
}

编辑根目录下的gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass'); gulp.task('sass', function() {
return gulp.src('src/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'));
});

在根目录下命令行执行gulp sass

gulp 前端构建工具入门

可以看到css目录下自动出现了编译后的css文件。

2.3 使用通配符

类似于正则,可以匹配多个文件。

  • *.scss 匹配当前目录任意scss文件
  • **/*.scss 匹配当前目录及子目录下的所有scss文件
  • !exclude.scss 排除匹配项
  • *.+(scss|sass) 匹配多项

上面例子的gulpfile可以改为:

gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
});

2.4 监听文件变化

gulp.series:按照顺序执行

gulp.paralle:可以并行计算

watch方法可以监听文件变化从而自动执行指定任务:

gulp.task('sass-watch', function() {
gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

命令行执行gulp sass-watch

gulp 前端构建工具入门

2.5 自动刷新浏览器

Browser Sync插件可以搭建本地服务器并且实时刷新浏览器。

npm install --save-dev browser-sync

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync'); var server = browserSync.create(); gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
// 刷新浏览器
.pipe(server.reload({
stream: true
}));
}); // 创建本地服务
gulp.task('browserSync', function(done) {
server.init({
server: {
baseDir: 'src'
}
});
done();
}); // 监听所有sass文件
gulp.task('sass-watch', function() {
gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
}); // 最终任务
gulp.task('watcher', gulp.series('browserSync', 'sass', 'sass-watch'));

gulp 前端构建工具入门


后续会学习一下优化以及gulp4的一些新写法。

To be continued... Last updated by Jehorn, 7:17 PM, Wednesday, February 27, 2019 (GMT+8)

gulp 前端构建工具入门的更多相关文章

  1. gulp 前端构建工具使用

    gulp 前端构建工具使用 1.新建一个web  h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...

  2. Gulp前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp ...

  3. 入门gulp前端构建工具

    1. 全局安装 gulp:(倘若之前电脑安装过,则跳过此步骤) $ cnpm install -g gulp 2. 作为项目的开发依赖(devDependencies)安装: (此步骤会自动在目录下创 ...

  4. gulp前端构建工具的搭建

    我的机器: 3.13.0-32-generic #57-Ubuntu SMP Tue Jul 15 03:51:08 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux 1 ...

  5. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  6. gulp前端自动化构建工具入门篇

    现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...

  7. 前端构建工具之gulp的安装和配置

    在选择构建工具时,看到更多人推荐gulp,从此入了gulp的坑- 一.安装node环境 百度谷歌一下就有了,在终端中分别输入 node -v 和 npm -v,若显示node和npm的版本号则说明no ...

  8. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  9. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

随机推荐

  1. 爬虫技术 -- 进阶学习(十)网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp)

    最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决定试一试~ 于是到https://www.nuget.org/packages/Scrapy ...

  2. MySQL存储过程中实现回滚

    用存储过程处理复杂的业务时,可能涉及到对多张表格的操作,在任一个步骤出了问题,就需要对前面的操作回滚.举例实现: DROP PROCEDURE IF EXISTS pro_test; CREATE P ...

  3. Linux 2.6内核Makefile浅析

    1 概述 Makefile由五个部分组成: Makefile:根目录Makefile,它读取.config文件,并负责创建vmlinux(内核镜像)和modules(模块文件). .config:内核 ...

  4. dtrace4linux_Example

    http://www.slideshare.net/brendangregg/what-linux-can-learn-from-solaris-performance-and-viceversa/8 ...

  5. Red Gate - SQL Source Control实现对SQL SERVER 的源代码控制

    原文地址:http://bbs.csdn.net/topics/350165431 SQL Server 一直没有一款很好的源码控制器,之前自己曾尝试自己写一个,将所有的 脚本 自动生成到某一目录下, ...

  6. C++历史

    C++历史 早期C++ •1979: 首次实现引入类的C(C with Classes first implemented) 1.新特性:类.成员函数.继承类.独立编译.公共和私有访问控制.友元.函数 ...

  7. 报错:library not found for -lstdc++.6.0.9

    在Xcode 10开发中, 报错:library not found for -lstdc++.6.0.9 解决方案:将Xcode9的libstdc++6.0.9.tbd拷贝到Xcode10中使用 X ...

  8. C. Edgy Trees Codeforces Round #548 (Div. 2) 并查集求连通块

    C. Edgy Trees time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  9. go标准库的学习-crypto/des

    参考:https://studygolang.com/pkgdoc 导入方式: import "crypto/des" des包实现了DES标准和TDEA算法,参见U.S. Fed ...

  10. .NET的弹性及瞬间错误处理库Polly

    原文:.NET的弹性及瞬间错误处理库Polly 本文基本是官方说明的翻译和总结(https://github.com/App-vNext/Polly) 什么是Polly? Polly是一款基于.NET ...