看了就会——简单易懂的gulp入门配置
写在前面:这篇文章 基于gulp3版本写的。如果是gulp4版本运行下面一些指令可能会报错,个别已给出 gulp4版本的解决方案,但是自动刷新的功能找不到gulp4的解决方案,所以仍然提供的是gulp3版本方案。
安装Gulp
安装Gulp之前你需要先安装Node.js。
安装完Node.js,使用Terminal(终端,win下是cmd)用下面命令安装Gulp
[code]sudo npm install gulp -g
-g 表示全局安装,这样你在电脑上任何位置都能只用gulp 命令。
npm install 是指定从Node Package Manager安装的命令。
只有mac用户才需要sudo命令,Mac 用户需要管理员权限才能全局安装,所以需要sudo。
接下来使用Gulp创建项目。
创建Gulp项目
首先,我们新建一个project文件夹,然后进到目录下执行 npm init 命令:
[code]D:\project>npm init
npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息。比如你用到的各种依赖(这里主要是插件)(终端会自动出现下面内容,这里先随便填就行)
创建完之后,我们执行下面的命令:
[code]npm install gulp--save-dev
这一次,我们局部安装Gulp。使用—save-dev,将通知计算机在package.json中添加gulp依赖。
在正式开始之前,我们来看一下项目的目录结构。
目录结构
Gulp非常之灵活,理解它的内部工作,你就能在项目中得心应手。
这篇文章,我们使用通用的webapp目录结构:
在这个结构中,我们使用app文件夹作为开发目录(所有的源文件都放在这下面),dist文件夹用来存放生产环境下的内容。
这些文件名,你想怎么起都行,但请务必记住你的目录结构。现在我们来创建gulpfile.js。
第一个Gulp任务
你需要先在根目录下创建一个gulpfile.js文件。
[code]// gulpfile.js 文件引入 var gulp = require('gulp');
这行命令告知Node去node_modules中查找gulp包,先局部查找,找不到就去全局环境中查找。找到之后就会赋值给gulp变量,然后我们就可以使用它了。
简单的任务如下所示:
写个Hello World,是这样的:
[code]gulp.task('hello',function() { console.log('Hello World!'); });
命令行中执行 gulp hello,发现编译过程如下图所示,说明这个任务已经跑起来了。
但是如果编译如下图,说明出错了,可能是gulp的版本问题。
可以改成这样就没问题了:
[code]gulp.task('hello', async() => { await console.log('Hello World!'); });
Gulp任务通常都会比这难一丁点,就一丁点。通常会包含两个特定的Gulp方法和一些列Gulp插件。
大概这样:
[code]gulp.task('task-name',function() { return gulp.src('source-files') .pipe(aGulpPlugin()) .pipe(gulp.dest('destination')) })
正如你所见,两个Gulp方法,src,dest,一进一出。下面用编译Sass来举栗子。
Gulp执行预处理
我们使用gulp-sass插件来编译Sass。安装插件的步骤是这样的:
使用npm install 命令安装
[code]npm install gulp-sass --save-dev
在gulpfile中引入插件,用变量保存
[code]var gulp =require('gulp'); var sass =require('gulp-sass');
在任务中使用
[code]gulp.task('sass',function(){ return gulp.src('source-files') //这里是传入的需要gulp的源文件 .pipe(sass()) // 这里是前面require进来的gulp-sass插件 .pipe(gulp.dest('destination')) //这里是输出的目标文件 });
我们需要给sass任务提供源文件和输出位置。所以我们先在项目中创建app/scss文件夹,再在scss文件夹下新建styles.scss文件。这个文件将在gulp.src中用到。
sass处理之后,我们希望它生成css文件并产出到app/css目录下,可以这样写:
[code]gulp.task('sass',function(){ return gulp.src('app/scss/styles.scss') .pipe(sass()) .pipe(gulp.dest('app/css')) });
然后在styles.scss 写一些样式代码:
命令行执行gulp sass,你将看到app/css/styles.css文件下会有下面的代码:
styles.css是gulp自动为我们生成的。
使用Sass就这么简单。但是通常我们不止有一个scss文件。这时候可以使用Node通配符
Node中的通配符
通配符是一种匹配模式,允许你匹配到多个文件。不止是Node,很多平台都有,有点像正则表达式。
使用通配符,计算机检查文件名和路径进行匹配。
大部分时候,我们只需要用到下面4种匹配模式:
*.scss : * 号匹配当前目录任意文件,所以这里 *.scss 匹配当前目录下所有scss文件
*/.scss :匹配当前目录及其子目录下的所有scss文件。
!not-me.scss :!号移除匹配的文件,这里将移除not-me.scss
*.+(scss|sass) :+号后面会跟着圆括号,里面的元素用|分割,匹配多个选项。这里将匹配scss和sass文件。
那么还是上面的栗子,改造一下:
[code]gulp.task('sass',function() { return gulp.src('app/scss/**/*.scss') .pipe(sass()) .pipe(gulp.dest('app/css')) })
我们这会再在scss文件夹下新建一个style2.scss文件。
命令行执行gulp sass。然后再看app/css目录下,现在已经有两个文件了,分别是:style.css 和 style2.css。
现在我们能处理多个文件了,但是不想每次都要执行命令,怎么办?Gulp就是为懒人而生的,我们可以使用watch命令,自动检测并执行。
监听Sass文件
Gulp提供watch方法给我们,语法如下:
[code]gulp.watch('files-to-watch', ['tasks','to','run']);
将上面的栗子再改下:
[code]gulp.watch('app/scss/**/*.scss', ['sass']);
通常我们监听的还不只是一个文件,把它变成一个任务:
[code]gulp.task('watch',function(){ gulp.watch('app/scss/**/*.scss', ['sass']); // Other watchers })
执行gulp watch命令。
如果是gulp4 版本的会报错如下:
原因是 ['sass']是Gulp3的方式指定依赖任务,在Gulp4中使用gulp.series和gulp.parallel。
改成这样就好:
[code]gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', gulp.series('sass')); // Other watchers });
有了监听,每次修改文件保存之后,Gulp都将自动为我们执行任务。
还不够,修改完直接帮我刷新浏览器行吗。
使用Browser Sync自动刷新
Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器
新插件?记住!安装,引入,使用。
[code]npm install browser-sync--save-dev
引入:
[code]var browserSync =require('browser-sync');
我们创建一个broswerSync任务,我们需要告知它,根目录在哪里。
[code]gulp.task('browserSync', function() { browserSync({ server: { baseDir:'app' }, }) })
我们稍微修改一下之前的代码,让每次css文件更改都刷新一下浏览器:
[code]gulp.task('sass',function() { return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scssin app/scss .pipe(sass()) .pipe(gulp.dest('app/css')) .pipe(browserSync.reload({ stream:true })) });
然后改一下watch任务如下:
[code]gulp.task('watch', gulp.series('sass', 'browserSync', function(){ gulp.watch('app/scss/**/*.scss', gulp.series('sass')); // Other watchers }));
执行 gulp watch:
!!!但是改动文件之后,并没有实时刷新,终端也没有监听得到。找了很久没有找到方法解决,我最后把gulp的版本降回了3.9。
[code]cnpm install gulp@3.9.0
然后改了gulpfile.js 文件的watch任务写法如下:
[code]gulp.task('watch', ['browserSync', 'sass'], function (){ gulp.watch('app/scss/**/*.scss', ['sass']); })
再执行gulp wacth 此时发现 再改动scss文件。终端立马监听得到并且浏览器页面也自动刷新了。真是折腾啊!!!
不止是scss修改的时候需要刷新浏览器吧?再改改:
[code]gulp.task('watch', ['browserSync', 'sass'], function (){ gulp.watch('app/scss/**/*.scss', ['sass']); gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/js/**/*.js', browserSync.reload); });
现在不论是改动scss,还是html,还是js都能自动刷新了。
附上gulpfile.js 的代码:
[code]var gulp = require('gulp'); var sass = require('gulp-sass'); var browserSync = require('browser-sync'); gulp.task('hello', async() => { await console.log('Hello World!'); }); //编译Sass gulp.task('sass', function() { return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss .pipe(sass()) .pipe(gulp.dest('app/css')) .pipe(browserSync.reload({ stream: true })) }); gulp.task('browserSync', function() { browserSync({ server: { baseDir: 'app' }, }) }); //监听 gulp.task('watch', ['brows 20000 erSync', 'sass'], function (){ gulp.watch('app/scss/**/*.scss', ['sass']); gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/js/**/*.js', browserSync.reload); });
今天参考网上的文章学习了gulp,一边记录下来。希望能加深记忆的同时帮到需要的人。
- 简单入门配置webpack
- 小兔JS教程(五)简单易懂的JSON入门
- [转]简单易懂的基金入门帖_2
- hibernate5简单入门一对多,多对一,多对多的配置及注解实现
- 【Linux运维入门】Linux环境安装配置MongoDb及简单使用
- Vagrant入门——简单配置及使用(Provisioning)
- Hive2.0.0安装步骤(配置mysql+简单入门)
- 简单易懂的讲解深度学习(入门系列之九)
- MySQL---数据库从入门走向大神系列(七)-Java访问数据库配置及简单使用方法execute
- ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面
- mod_python配置,及简单psp开发入门
- 简单易懂的程序语言入门小册子(1.5):基于文本替换的解释器,递归定义与lambda演算的一些额外说明
- [转]简单易懂的基金入门帖_4
- 170328、Maven+SpringMVC+Dubbo 简单的入门demo配置
- Maven+SpringMVC+Dubbo+zookeeper 简单的入门demo配置
- Cocos2dx发布Android包,配置开发环境(菜鸟级入门,一看就会)
- 【mybatis】入门 - 基本配置、简单示例
- grub学习笔记一(入门简单配置篇)
- [教程]OpenSEES超简单易懂的入门第一课
- Maven入门实战(一)——MVN的安装、配置、生命周期、简单入门实例和创建父/子工程