前端构建工具Gulp.js知多少(webpack/gulp/grunt)

时间  2019-11-17
标签 前端 构建 工具 gulp.js gulp 多少 webpack grunt 栏目 JavaScript 繁體版
原文   原文链接

@TOCjavascript

写在前面

前几天在更新webpack知识的时候，想起来三年前用过的前端构建工具gulp/grunt,遂写个笔记总结一下，出来混老是要还的，忘得七七八八了...css

阅读本文章以前，相信你已经对前端构建工具(webpack、gulp、grunt)有必定的认知和了解了，那么他们之间究竟有什么区别呢？html

什么是gulp？

gulp文档上面有这么一句话\color{blue} {用自动化构建工具加强你的工做流程！} ，也就是说 gulp是一个自动化构建工具； gulp的一些功能以下(包括但不限于): 前端

自动化构建工具gulp

gulp或grunt和webpack的区别

其实Webpack和另外两个并无太多的可比性vue

  • Gulp/Grunt是一种可以优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优势使得Webpack在不少场景下能够替代Gulp/Grunt类的工具。java

  • Grunt和Gulp的工做方式是：在一个配置文件中，指明对某些文件进行相似编译，组合，压缩等任务的具体步骤，工具以后能够自动替你完成这些任务。 node

    Grunt和Gulp的工做流程

  • Webpack的工做方式是：把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 webpack

    Webpack的工做方式
    上述内容转自@zhangwang的入门Webpack，看这篇就够了

gulp起步

傻瓜式起步照搬官网文档 1.安装nginx

// 全局安装
$ npm install -g gulp
或者
$ npm install --global gulp

// 做为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp
复制代码

2.在项目根目录下建立一个名为 gulpfile.js 的文件：git

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});
复制代码

3.运行 gulp：

$ gulp
复制代码

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未作任何事情。 具体详情能够查看gulpjs.com文档

项目搭建

新建一个项目gulp-test 环境:

$ node -v // v9.1.0
$ npm -v // 6.5.0
复制代码

1.新建文件如下文件以下

gulp-test/
          css/
               index.scss
           js/
               helloworld.js
           index.html
           gulpfile.js
复制代码

其中 gulpfile.js 是咱们gulp的配置文件，启动gulp默认会找个这个文件并执行； 2.接下来安装依赖

$ npm init
复制代码

一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 能够免去繁琐的enter步骤) 此时咱们的目录结构是这样了

gulp-test/
          css/
               index.scss
           js/
               helloworld.js
           index.html
           gulpfile.js
           package.json
复制代码

安装依赖

npm i --save-dev gulp        // gulp自动化构建工具
npm i --save-dev gulp-uglify //js压缩
npm i --save-dev gulp-concat //文件合并
npm i --save-dev gulp-jshint //js语法检测
npm i --save-dev gulp-rename //文件重命名
npm i --save-dev gulp-sass //sass编译工具
npm i --save-dev gulp-minify-css //css压缩
npm i --save-dev del       //文件删除
// 如下三选一
npm i --save-dev gulp-connect       // 自动刷新页面
npm i --save-dev  browser-sync       // 自动刷新页面
npm i --save-dev gulp-livereload       // 自动刷新页面
复制代码

这里页面实时刷新只讲这个gulp-connect ，其余详情能够参照Browsersync和文章gulp-livereload

安装完依赖后配置gulpfile.js以下:

// 定义依赖项和插件
const gulp=require('gulp');
const  uglify=require('gulp-uglify'); //js压缩
const  concat=require('gulp-concat'); //文件合并
const jshint = require('gulp-jshint'); //js语法检测
const rename = require('gulp-rename'); // 重命名
const sass = require('gulp-sass'); // 编译scss
const  minifycss = require('gulp-minify-css'); // 压缩css
// const livereload = require('gulp-livereload'); // 自动刷新页面
const  del = require('del'); //文件删除
const connect = require('gulp-connect'); // 自动刷新页面

gulp.task('server', function() {
  connect.server({
    port: 8080, //指定端口号，在浏览器中输入localhost:8080就能够直接访问生成的html页面
    root: './', //指定html文件起始的根目录
    livereload: true //启动实时刷新功能（配合上边的connect.reload()方法同步使用）
  });
});

// 定义名为 "my-task" 的任务压缩js
gulp.task('my-task-js', function(){
  gulp.src('./js/*.js')
    .pipe(jshint())
    .pipe(uglify())
    .pipe(concat('all.js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/js'))
    .pipe(connect.reload())
});


// 定义名为 "my-task-css" 的任务编译scss压缩css
gulp.task('my-task-css', function() {
  gulp.src('./css/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('all.css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(connect.reload())
    .pipe(gulp.dest('./dist/css'))

});

gulp.task('html', function(){
  gulp.src('*.html')
    .pipe(gulp.dest('dist/html'))
    .pipe(connect.reload())
})
//执行压缩前，先删除之前压缩的文件
gulp.task('clean', function() {
  return del(['./dist/css/all.css', './dist/css/all.min.css', './dist/all.js','./dist/all.min.js', './dist/html'])
});
// 定义默认任务

gulp.task('default',['clean'],function() {
  gulp.start('my-task-js', 'my-task-css', 'watch', 'server' );
});
// 任务监听
gulp.task('watch', function() {
  // Watch.js files
  gulp.watch('./js/*.js', ['my-task-js']);
  // Watch .scss files
  gulp.watch('./css/*.scss', ['my-task-css']);
  // Watch .html files
  gulp.watch('./*.html', ['html']);
  // Watch any files in dist/, reload on change
  // gulp.watch(['dist/!**']).on('change', livereload.changed);
});

复制代码

大概讲解一下gulpfile.js:

// ...
// 定义名为 "my-task" 的任务压缩js
gulp.task('my-task-js', function(){
  gulp.src('./js/*.js')
    .pipe(jshint()) //js检测
    .pipe(uglify()) //js压缩
    .pipe(concat('all.js')) //合并为all.js
    .pipe(rename({suffix: '.min'})) // 重命名为all.mim.js
    .pipe(gulp.dest('./dist/js')) //输出到/dist/js目录
    .pipe(connect.reload()) // 更新页面
});
// ...
复制代码

gulp.task是gulp的api 定义一个使用 Orchestrator 实现的任务（task） 如上咱们定义了my-task-js，my-task-css，html，clean，default，watch，server等任务，其中:

  • my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下；

  • my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下；

  • html 是将 符合所提供的匹配模式的html进行监听，若是有变化则connect.reload()

  • clean 是若是任务从新启动时 删除旧文件；

  • default gulp默认启动的任务

  • watch gulp的api 监视文件，而且能够在文件发生改动时候作一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

  • server 依赖gulp-connect启动一个服务器

gulp.task('server', function() {
  connect.server({
    port: 8080, //指定端口号，在浏览器中输入localhost:8080就能够直接访问生成的html页面
    root: './', //指定html文件起始的根目录
    livereload: true //启动实时刷新功能（配合上边的connect.reload()方法同步使用）
  });
});
复制代码

配置完gulpfile.js以后，咱们给js和css及html加点东西:

首先js/helloworld.js

// helloworld.js
console.log('hello world')
复制代码

css/index.scss

// index.scss

// 变量测试
$fontColor:  #red;
$backColor: aqua;
// 嵌套类测试
div {
  p {
    font-weight: bold;
    font-size: 20px;
    color: $fontColor;
  }
}

div{
  background: $backColor;
}
复制代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>gulp-study</title>
	<link href=/dist/css/all.min.css rel=stylesheet>
</head>
<body>
	<div id="firstDiv">
		<p>我是gulp</p>
		<p>hello world</p>
	</div>
<p>我是p标签</p>
<p>我是p标签</p>
</body>
<script src="/dist/js/all.min.js"></script>
</html>

复制代码

运行gulp

$ gulp 
复制代码

运行输出

浏览器效果:

效果

接下来咱们修改helloworld.js来看看是否能实时刷新 修改以下:

// helloworld.js
console.log('hello world');

let firstDiv =  document.getElementById('firstDiv')

console.log(firstDiv)

复制代码

按保存以后，终端给咱们报了一个错:

Unhandled 'error' event

查看js发现咱们用了es6语法的声明语句\color{red}{let} 但当前gulp没法处理es6语法，有问题解决问题，es6=>es5

解决方案: 安装gulp-babel babel-core babel-preset-es2015

npm i  --save-dev  gulp-babel babel-core babel-preset-es2015
复制代码

gulpfile.js修改以下:

// ...
const babel = require('gulp-babel');
// ...
// 定义名为 "my-task" 的任务压缩js
gulp.task('my-task-js', function(){
  gulp.src('./js/*.js')
    .pipe(babel())
    .pipe(jshint())
    .pipe(uglify())
    .pipe(concat('all.js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/js'))
    .pipe(connect.reload())
});
// ...

复制代码

运行

$ gulp
复制代码

依然报上面的错；找了一些缘由发现，虽然安装了相关依赖，却没有配置.babelrc文件，即babel还没转化es6

根目录添加.babelrc文件

{
	"presets": ["es2015"]
}

复制代码

从新运行:

$ gulp
复制代码

结果以下

查看dist下的js文件

let已经转化成var

改变helloworld.js检查页面是否刷新

// helloworld.js
console.log('hello world');

let firstDiv =  document.getElementById('firstDiv')

console.log(firstDiv)
firstDiv.style.backgroundColor = 'yellow';

复制代码

保存，页面的天空蓝换成大家喜欢的yellow颜色

页面的天空蓝换成大家喜欢的yellow颜色

修改index.scss 查看是否会刷新页面

// index.scss

// 变量测试
$fontColor:  #red;
$backColor: aqua;
// 嵌套类测试
div {
  p {
    font-weight: bold;
    font-size: 20px;
    color: $fontColor;
  }
}

div{
  background: $backColor;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}


复制代码

页面更新正常

最后修改index.html 查看是否会刷新页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>gulp-study</title>
	<link href=/dist/css/all.min.css rel=stylesheet>
</head>
<body>
	<div id="firstDiv">
		<p>我是gulp</p>
		<p>hello world</p>
	</div>
<div>
	<p>我是真的皮</p>
</div>
</body>
<script src="/dist/js/all.min.js"></script>
</html>

复制代码

输出完美

这次项目源码请转@王一诺gulp-study

文章最后

今天主要学习了gulp的简单项目搭建及实时更新配置；其实gulp相似于grunt的弱化版，但更简单好用，只是插件会少一些，目前主流的项目搭建工具主要是webpack，但依然有很多项目还用着gulp或者grunt

扩展:

webpack中文网

gulpjs中文网

gruntjs中文网

下面还有一些楼主的学习笔记:

@webpack4+加vue2+从零开始搭设vue项目

@nginx部署/代理/跨域

有兴趣的能够多多交流@楼主博客

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程