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 前端构建工具入门的更多相关文章
-
gulp 前端构建工具使用
gulp 前端构建工具使用 1.新建一个web h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...
-
Gulp前端构建工具
Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp ...
-
入门gulp前端构建工具
1. 全局安装 gulp:(倘若之前电脑安装过,则跳过此步骤) $ cnpm install -g gulp 2. 作为项目的开发依赖(devDependencies)安装: (此步骤会自动在目录下创 ...
-
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 ...
-
(转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
-
gulp前端自动化构建工具入门篇
现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用? 什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...
-
前端构建工具之gulp的安装和配置
在选择构建工具时,看到更多人推荐gulp,从此入了gulp的坑- 一.安装node环境 百度谷歌一下就有了,在终端中分别输入 node -v 和 npm -v,若显示node和npm的版本号则说明no ...
-
前端构建工具之gulp(一)「图片压缩」
前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...
-
前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
随机推荐
-
爬虫技术 -- 进阶学习(十)网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp)
最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决定试一试~ 于是到https://www.nuget.org/packages/Scrapy ...
-
MySQL存储过程中实现回滚
用存储过程处理复杂的业务时,可能涉及到对多张表格的操作,在任一个步骤出了问题,就需要对前面的操作回滚.举例实现: DROP PROCEDURE IF EXISTS pro_test; CREATE P ...
-
Linux 2.6内核Makefile浅析
1 概述 Makefile由五个部分组成: Makefile:根目录Makefile,它读取.config文件,并负责创建vmlinux(内核镜像)和modules(模块文件). .config:内核 ...
-
dtrace4linux_Example
http://www.slideshare.net/brendangregg/what-linux-can-learn-from-solaris-performance-and-viceversa/8 ...
-
Red Gate - SQL Source Control实现对SQL SERVER 的源代码控制
原文地址:http://bbs.csdn.net/topics/350165431 SQL Server 一直没有一款很好的源码控制器,之前自己曾尝试自己写一个,将所有的 脚本 自动生成到某一目录下, ...
-
C++历史
C++历史 早期C++ •1979: 首次实现引入类的C(C with Classes first implemented) 1.新特性:类.成员函数.继承类.独立编译.公共和私有访问控制.友元.函数 ...
-
报错: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 ...
-
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 ...
-
go标准库的学习-crypto/des
参考:https://studygolang.com/pkgdoc 导入方式: import "crypto/des" des包实现了DES标准和TDEA算法,参见U.S. Fed ...
-
.NET的弹性及瞬间错误处理库Polly
原文:.NET的弹性及瞬间错误处理库Polly 本文基本是官方说明的翻译和总结(https://github.com/App-vNext/Polly) 什么是Polly? Polly是一款基于.NET ...