看了就会——简单易懂的gulp入门配置

写在前面:这篇文章 基于gulp3版本写的。如果是gulp4版本运行下面一些指令可能会报错,个别已给出 gulp4版本的解决方案,但是自动刷新的功能找不到gulp4的解决方案,所以仍然提供的是gulp3版本方案。

安装Gulp

安装Gulp之前你需要先安装Node.js。

安装完Node.js,使用Terminal(终端,win下是cmd)用下面命令安装Gulp

sudo npm install gulp -g

-g 表示全局安装,这样你在电脑上任何位置都能只用gulp 命令。

npm install 是指定从Node Package Manager安装的命令。

只有mac用户才需要sudo命令,Mac 用户需要管理员权限才能全局安装,所以需要sudo。

接下来使用Gulp创建项目。

创建Gulp项目

首先,我们新建一个project文件夹,然后进到目录下执行 npm init 命令:

D:\project>npm init

npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息。比如你用到的各种依赖(这里主要是插件)(终端会自动出现下面内容,这里先随便填就行) 

看了就会——简单易懂的gulp入门配置_第1张图片

 

创建完之后,我们执行下面的命令: 

npm install gulp--save-dev

这一次,我们局部安装Gulp。使用—save-dev,将通知计算机在package.json中添加gulp依赖。 

看了就会——简单易懂的gulp入门配置_第2张图片

在正式开始之前,我们来看一下项目的目录结构。 

目录结构

Gulp非常之灵活,理解它的内部工作,你就能在项目中得心应手。

这篇文章,我们使用通用的webapp目录结构: 

看了就会——简单易懂的gulp入门配置_第3张图片

 

在这个结构中,我们使用app文件夹作为开发目录(所有的源文件都放在这下面),dist文件夹用来存放生产环境下的内容。

这些文件名,你想怎么起都行,但请务必记住你的目录结构。现在我们来创建gulpfile.js。

第一个Gulp任务

你需要先在根目录下创建一个gulpfile.js文件。

// gulpfile.js 文件引入

var gulp = require('gulp');

这行命令告知Node去node_modules中查找gulp包,先局部查找,找不到就去全局环境中查找。找到之后就会赋值给gulp变量,然后我们就可以使用它了。

简单的任务如下所示:

写个Hello World,是这样的:

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

 命令行中执行 gulp hello,发现编译过程如下图所示,说明这个任务已经跑起来了。

看了就会——简单易懂的gulp入门配置_第4张图片

但是如果编译如下图,说明出错了,可能是gulp的版本问题。

看了就会——简单易懂的gulp入门配置_第5张图片

可以改成这样就没问题了: 

gulp.task('hello', async() => {
     await console.log('Hello World!');
});

 Gulp任务通常都会比这难一丁点,就一丁点。通常会包含两个特定的Gulp方法和一些列Gulp插件。

大概这样:

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 命令安装

npm install gulp-sass --save-dev

 在gulpfile中引入插件,用变量保存

var gulp =require('gulp');
var sass =require('gulp-sass');

 在任务中使用

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目录下,可以这样写:

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

然后在styles.scss 写一些样式代码:

看了就会——简单易懂的gulp入门配置_第6张图片

命令行执行gulp sass,你将看到app/css/styles.css文件下会有下面的代码:

看了就会——简单易懂的gulp入门配置_第7张图片

styles.css是gulp自动为我们生成的。
使用Sass就这么简单。但是通常我们不止有一个scss文件。这时候可以使用Node通配符

Node中的通配符

通配符是一种匹配模式,允许你匹配到多个文件。不止是Node,很多平台都有,有点像正则表达式。

使用通配符,计算机检查文件名和路径进行匹配。

大部分时候,我们只需要用到下面4种匹配模式:

*.scss : * 号匹配当前目录任意文件,所以这里 *.scss 匹配当前目录下所有scss文件

*/.scss :匹配当前目录及其子目录下的所有scss文件。

!not-me.scss :!号移除匹配的文件,这里将移除not-me.scss

*.+(scss|sass) :+号后面会跟着圆括号,里面的元素用|分割,匹配多个选项。这里将匹配scss和sass文件。

那么还是上面的栗子,改造一下:

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

})

我们这会再在scss文件夹下新建一个style2.scss文件。

看了就会——简单易懂的gulp入门配置_第8张图片

命令行执行gulp sass。然后再看app/css目录下,现在已经有两个文件了,分别是:style.css 和 style2.css。

看了就会——简单易懂的gulp入门配置_第9张图片

现在我们能处理多个文件了,但是不想每次都要执行命令,怎么办?Gulp就是为懒人而生的,我们可以使用watch命令,自动检测并执行。

监听Sass文件

Gulp提供watch方法给我们,语法如下:

gulp.watch('files-to-watch', ['tasks','to','run']);

将上面的栗子再改下:

gulp.watch('app/scss/**/*.scss', ['sass']);

通常我们监听的还不只是一个文件,把它变成一个任务:

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

执行gulp watch命令。

看了就会——简单易懂的gulp入门配置_第10张图片

如果是gulp4 版本的会报错如下:

看了就会——简单易懂的gulp入门配置_第11张图片

原因是 ['sass']是Gulp3的方式指定依赖任务,在Gulp4中使用gulp.series和gulp.parallel。

改成这样就好:

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

有了监听,每次修改文件保存之后,Gulp都将自动为我们执行任务。

还不够,修改完直接帮我刷新浏览器行吗。

使用Browser Sync自动刷新

Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器

新插件?记住!安装,引入,使用。

npm install browser-sync--save-dev

引入:

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

我们创建一个broswerSync任务,我们需要告知它,根目录在哪里。

gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir:'app'
        },
    })
})

我们稍微修改一下之前的代码,让每次css文件更改都刷新一下浏览器:

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任务如下:

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

执行 gulp watch:

看了就会——简单易懂的gulp入门配置_第12张图片

!!!但是改动文件之后,并没有实时刷新,终端也没有监听得到。找了很久没有找到方法解决,我最后把gulp的版本降回了3.9。

cnpm install [email protected]

然后改了gulpfile.js 文件的watch任务写法如下:

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

再执行gulp wacth 此时发现 再改动scss文件。终端立马监听得到并且浏览器页面也自动刷新了。真是折腾啊!!!

不止是scss修改的时候需要刷新浏览器吧?再改改:

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都能自动刷新了。

看了就会——简单易懂的gulp入门配置_第13张图片

 


附上gulpfile.js 的代码:

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', ['browserSync', 'sass'], function (){
     gulp.watch('app/scss/**/*.scss', ['sass']);
   gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});

今天参考网上的文章学习了gulp,一边记录下来。希望能加深记忆的同时帮到需要的人。

 

 

 

 

 

 

你可能感兴趣的:(gulp)