gulp 前端构建工具入门

标签(空格分隔): gulp


1. 安装gulp

npm i -g 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

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

可以看到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

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'));


后续会学习一下优化以及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. ant.design初探

    第一部分: 前言 推荐网站: https://ant.design/docs/spec/introduce-cn ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计 ...

  2. Git学习系列之集中式版本控制系统vs分布式版本控制系统

    不多说,直接上干货! Linus一直痛恨的CVS及SVN都是集中式的版本控制系统,而Git是分布式版本控制系统,集中式和分布式版本控制系统有什么区别呢? 先说集中式版本控制系统,版本库是集中存放在中央 ...

  3. 大型网站技术学习-3. 容器Docker与kubernetes

    大型网站技术基石篇-容器Docker与kubernetes   Docker和Kubernetes的关系就如Xen与OpenStack. Docker是一种容器技术,和Hypervisor(KVM/X ...

  4. javah找不到类文件

    这样即可,在src目录下寻找类,类要写全,即包名.类名

  5. entity framework 查看自动生成的sql

    public MesDbContext() : base("name=mysql") { Database.Log = new Action<string>(msg = ...

  6. AngularJS中的动画实现

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script ...

  7. C#之RabbitMQ系列(一)

    RabbitMQ–环境搭建 MQ MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接 ...

  8. C#语言-07.文件操作

    a. 文件操作:适用于相对简单的数据保存 i. 读写文件的步骤: . 创建文件流 . 创建读写器 . 读写文件 . 关闭读写器 . 关闭文件流 ii. FileStream(文件流),它主要用于读写文 ...

  9. Javascript基础系列之(五)条件语句(逻辑操作符)

    javascript和其它语言一样,逻辑运算主要包括 与运算&& ,或运算 II  和非运算 ! 与运算(&&)是指两个条件都为true时,整个表达式为true,或运算 ...

  10. 数据结构(四)--- 红黑树(RedBlock-Tree)

      文章图片来自邓俊辉老师课件 先提几个问题去思考学习本文 : 红黑树和2-4树(B-Tree)很像,那么它存在的动机又是什么呢 插入和删除操作的逻辑又是怎么样的,时间和空间复杂度可以达到怎么样 和 ...