gulp介绍
gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务：
搭建web服务器
文件保存时自动重载浏览器
使用预处理器如Sass、LESS
优化资源，比如压缩CSS、JavaScript、压缩图片
类似Gulp的工具，我们通常称之为构建工具或者叫自动化构建工具。
工程化的作用
我们经常把一整套前端工作流程中能用工具搞定的部分，用工具搞定。也就是将前端开发流程、技术、工具、经验等规范化，标准化。
常见的前端工程自动化工具：grunt、gulp，webpack等
我们学完gulp，可以构建一个自己的工作流
搭建本地web服务器
编译Sass
每当保存更改，自动刷新浏览器
优化&压缩资源
node环境安装
Node
JS：
Node.js是一个Javascript运行环境(runtime)
Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 。
NPM：全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。 ，它已经成为了非官方的发布Node模块（包）的标准。
nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Nodejs库和框架为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。
使用
NPM，必须安装nodeJS。
npm常用命令
npm -v：查看npm安装的版本。
npm init：会引导你创建一个package.json文件，包括名称、版本、作者等信息。
npm list：查看当前目录下已安装的node包。
npm ls：查看当前目录下已安装的node包。
npm install moduleNames：安装Node模块到本地目录node_modules下。
npm install <name> -g：将包安装到全局环境中。
npm install <name> --save：安装的同时，将信息写入package.json中
项目路径中如果有
package.json文件时，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。
npm install <name> --save-dev：安装的同时，将信息写入package.json中项目路径中如果有package.json文件时，直接使用npm install方法就可以根据devDependencies配置安装所有的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。
npm uninstall moudleName：卸载node模块。
gulp安装
1-项目中使用gulp 先创建一个文件夹gulptest作为项目的跟目录
在根目录下执行 npm init 命令，
npm init命令会为你创建一个package.json文件，这个文件保存着这个项目相关信息。比如你用到的各种依赖（这里主要是插件）
2-安装 gulp
npm install gulp -g
将包安装到全局环境中（全局安装命令行中可以使用gulp命令）。简写
（
npm i gulp -g
）（全局安装）
npm install gulp
--save-dev
安装
到本地目录，同时将安装信息
写入
package.json中，简写
(npm i gulp -D)（局部安装）
注：由于网络经常不好，考虑把npm换成国内的源，可以使用nrm切换软件源。
npm install -g nrm
nrm ls 查看所有的支持源（有*号的表示当前所使用的源,以下[name]表示源的名称）
nrm use [name] 将npm下载源切换成指定的源，可以切换为淘宝的服务器或者cnpm的服务器
如果直接在终端中使用
npm install 命令，会去查看package.json 中安装信息（项目依赖），自动安装需要的包
第一个Gulp任务
先在根目录下创建一个gulpfile.js文件
var gulp =
require(
'gulp');
这行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局环境中查找。找到之后就会赋值给gulp变量，然后我们就可以使用它了。
简单的任务如下所示：
gulp.task('task-name', function() {
// Stuff here
});
task-name 是给你的任务起的名字，稍后在命令行中执行gulp task-name，将运行该任务。
写个HelloWorld，是这样的：
gulp.task('hello', function() {
console.log('Hello World!');
});
命令行中执行：
$ gulp hello
那么将会输出Hello World!。 够简单吧？
Gulp任务通常都会比这难一丁点，就一丁点。通常会包含两个特定的Gulp方法和一些列Gulp插件。
大概这样：
gulp.task('task-name', function () {
gulp.src('source-files') //参数是文件路径，作用是获取某些文件
.pipe(aGulpPlugin()) // 获取文件之后，放入管道函数中，调用aGulpPlugin（gulp插件）函数处理
.pipe(gulp.dest('destination')) // 处理完之后，将处理之后的文件 通过管道输出到 destination目录中
})
正如你所见，两个Gulp方法，src,dest，一进一出，拿到文件之后一般会放入管道pipe函数中去处理。下面用编译Sass来举栗子
gulp sass插件安装和使用
当然可以去 npm官网搜插件
https://www.npmjs.com/search?q=gulp-sass
第一个就是 gulp-sass这个插件
https://www.npmjs.com/package/gulp-sass
文档上会告诉你先 安装
npm install node-sass gulp-sass --save-dev
然后告诉你使用例子
在gulpfile.js文件中写入如下代码
var gulp = require('gulp');//加载gulp模块
var sass = require('gulp-sass');//加载gulp-sass模块
sass.compiler = require('node-sass');//制定编译sass的工具
gulp.task('sass', function () {//新建一个任务,任务名字为sass，用来编译sass文件
return gulp.src('./sass/**/*.scss')//获取./sass/**/*.scss 这个目录下面的所有后缀为scss的文件
.pipe(sass().on('error', sass.logError))//放入管道中，使用sass函数处理，如果有错就，把错误信息先出出来
.pipe(gulp.dest('./css'));//把编译以后的文件放入css目录下面
});
gulp.task('sass:watch', function () {//新建了一个任务
gulp.watch('./sass/**/*.scss', ['sass']);//使用watch函数，来观察./sass/**/*.scs，所有的scss文件，一旦文件有变化（修改），就执行，后面数组中的sass任务
});
下面的参数，可以指定压缩风格
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp-uglify
插件安装和使用
gulp-uglify
压缩
js代码
安装
注意：需要安装两个
gulp-uglify和 pump
pump主要作用吧把所有流处理整合在一起 不用使用pipe函数，并且，如果js语法有错误，会提示语法错误
npm install --save-dev gulp-uglify pump
使用
//获取模块
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');
gulp.task('compress', function (cb) {//定义文任务
pump([
gulp.src('lib/*.js'),//获取lib下的js文件
uglify(), //压缩
gulp.dest('dist')//放入到dist目录下面
],
cb
);
});
压缩过程中 如果你的代码中有es6的代码，你会发现怎么都会报错，因为 这个插件不支持压缩es6的代码
怎么办呢？
我们之前给大家说过es6的代码可以通过工具转为es5的，工具名字叫babel
babel官网正中间一行黄色大字写着“babel is a javascript compiler”，翻译一下就是babel是一个javascript转译器。为什么会有babel存在呢？原因是javascript在不断的发展，但是浏览器的发展速度跟不上。以es6为例，es6中为javascript增加了箭头函数、块级作用域等新的语法和Symbol、Promise等新的数据类型，但是这些语法和数据类型并不能够马上被现在的浏览器全部支持，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作
javascript制作规范
在这里有必要简单讲一下javascript版本，我只是大体讲下，javascript是网景公司开发的一种脚本语言，1996年的时候以ECMAScript的名字正式成为一种标准。2007年的时候发布了版本es5，然后在随后近10年里js并没有大的变化。所以现在的浏览器都可以很好的支持es5。这一局面直到2015年被打破。2015年6月，TC39（javascript标准的制定组织）公布了新版本的js语言——ES6。而且从ES6开始，TC39规定每年都要发布一个js的新版本，新版本将包含年号，都是以ESxxxx的方式进行命名。所以2015年发布的ES6又叫ES2015，2016年发布的新的js版本就叫ES2016，2017年发布的新的js版本就叫ES2017……。
因为版本都是向前兼容的，就是老版本js版本中规定的语法和api在新版本的js中同样也会合理的。所以我们可以想到后面的规范肯定是包含前面的规范的，也就是ES2016版本的js规范是包含ES2015(ES6)规范的，ES2017是包含ES2016的也包含ES2015的。针对不同的规范，Babel也提供了对应的转换器。
-
babel-preset-es2015 将es2015版本的js转译为es5。
-
babel-preset-es2016 将es2016版本的js转译为es5。
-
babel-preset-es2017 将es2017版本的js转译为es5。
安装
babel/core
babel/preset-env
语法转译器
最常用的转译器。通过在.babelrc中配置env选项，可以让代码兼容不同版本的浏览器或者node。浏览器或者node已经支持的语法将不再转译了，不支持的才转译
gulp-babel
# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env
使用
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () =>
gulp.src('src/app.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'))
);
合并js
npm install
gulp-concat -D
//合并js gulp-concat
var concat = require('gulp-concat');
gulp.task('concat',function(cb){
pump([
gulp.src(['./src/js/a.js', './src/js/b.js']),
babel({'presets':'env'}),
concat('all.js'),
uglify(),
gulp.dest('./dist/js'),
gulp.dest('./src/js')
],
cb
);
})
压缩html
npm install gulp-htmlmin -D
//gulp-htmlmin 压缩html
var htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin', function() {
return gulp.src('src/html/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist/html'));
})
刷新
npm install gulp-connect -D
//刷新
var connect = require('gulp-connect');
gulp.task('connect',function(){
gulp.src('./src/html/*.html')
.pipe(connect.reload())
})
监听任务
//监听任务
gulp.task('watch',function(){
connect.server({
livereload:true
});
gulp.watch('./src/js/**/*.js',['concat','compress']);
gulp.watch('./src/sass/*.scss',['sass']);
gulp.watch('src/html/*.html',['htmlmin','connect']);
})
打包任务
//压缩js css html 任务
gulp.task('build',['compress','sass','htmlmin'],function () {
console.log('项目的构件压缩完毕！');
});
压缩图片
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
gulp.task('default', () =>
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);
扫一扫
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
