gulp

最新推荐文章于 2024-04-16 09:37:04 发布

「已注销」

最新推荐文章于 2024-04-16 09:37:04 发布

阅读量504

点赞数

分类专栏：构建工具

本文链接：https://blog.csdn.net/mpdemp/article/details/73657038

版权

构建工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是gulp?

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器，它能自动化地完成 javascript 、 coffee 、 sass 、 less 、 html/image 、 css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用 Gulp 来改变开发流程，从而使开发更加快速高效。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作， gulp 的流操作，能更快地更便捷地完成构建工作。

1、安装

gulp依赖于node环境，因此先安装node和npm。nodeJS

1.1、全局安装gulp

sudo npm install -g gulp

sudo是以管理员身份执行命令，一般会要求输入电脑密码
npm是安装node模块的工具，执行install命令
-g表示在全局环境安装，以便任何项目都能使用它
gulp是将要安装的node模块的名字

安装完成后可以使用命令行查看是否安装成功

gulp -v

安装完成后，进入到项目的目录。

1.2、初始化项目

生成项目的package.json的包管理文件

npm init

使用npm 初始化项目之后会在项目的根目录生成一个package.json文件
这里写图片描述

1.3、项目安装gulp

然后在项目中安装gulp

npm install gulp --save-dev

--save-dev的意思为将gulp的一些信息写进package.json。当然也可以不实用这个设置。
这里写图片描述

安装完成后会生成一个node_modules的文件夹。里面存放的是gulp预置的一些插件。

1.4、创建gulp主文件

在项目根目录下创建一个名为gulpfile.js的文件

文件创建完成后在文件中加入如下代码：

var gulp = require('gulp');
gulp.task('default',function(){
    //任务代码
});

1.5、运行gulp

运行默认的任务

gulp

如果想要单独执行特定的任务

 gulp <task> <othertask>

这里的<task>、othertask代表的是gulpfile.js文件里定义的任务。它们俩代表不同的任务。如果不使用任务名称，那么将执行默认的任务

2、开始

2.1、安装依赖

npm install gulp-jshint gulp-sass gulp-jshint gulp-uglife gulp-rename --save-dev

完成后，package.json如下

这里写图片描述

除了这种使用命令安装依赖的方法，还可以直接修改package.json文件如上图。然后使用

npm install

因为npm install在安装的依赖的时候会首先查看项目文件node_modules中是否已经存这个模块，如果不存在则会去网络下载。如果之前下载过，也就是缓存中存在，也会忽略掉。

对于上面的语法检查组件gulp-jshint我个人没用过，一般时候都使用的ellint

npm install gulp-eslint --save-dev

2.2、更新gulpfile.js

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var jshint = require('gulp-eslint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// eslint检查脚本
gulp.task('lint', function() {
    gulp.src(['**/*.js','!node_modules/**'])//这里设置目录
        .pipe(eslint({configFile: 'eslint.json'}))
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
});

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

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

2.2.1、引入组件

引入核心的gulp和其他的依赖组件。

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var jshint = require('gulp-eslint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

2.2.2、Lint任务

创建lint任务，用于对src指定的目录进行语法检查

// eslint检查脚本
gulp.task('lint', function() {
    gulp.src(['**/*.js','!node_modules/**'])//这里设置目录
        .pipe(eslint({configFile: 'eslint.json'}))
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
});

这是是使用eslint.json来配置eslint的检查规则。eslint.json需要手动创建，放在文档根目录下。也可以采用在代码中直接配置，但规则太多会影响程序的可读性，因此建议保存于单独的文件中。
npm gulp-eslint
规则列表

2.2.3、Sass任务

创建sass任务，用于编译src指定路径下的文件/scss文件，编译完成的css文件保存到/css目录中

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

2.2.4、Script任务

创建script任务，scripts任务会合并js/目录下得所有得js文件并输出到dist/目录，然后gulp会重命名、压缩合并的文件，也输出到dist/目录。

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

2.2.5、default任务

创建默认任务。创建一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务，使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。

gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});