Gulp学习笔记

 

Gulp基于Node.js的前端构建工具，因此要先安装node。关于node的安装，参考：

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

 

node安装包下载：

https://nodejs.org/en/download/

 

安装：

下载的是.msi安装包，一路接受安装。安装完成后，打开cmd输入path命令，查看到环境变量中有了刚才的安装目录

输入命令node -v，查看node的版本号

退出Node.js环境

连按两次Ctrl+C。

NPM

在正式开始Node.js学习以前，先认识一下npm,，NPM是随同NodeJS一块儿安装的包管理工具

为啥咱们须要一个包管理工具呢？由于咱们在Node.js上开发时，会用到不少别人写的JavaScript代码。若是咱们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，很是繁琐

有了npm，能够直接执行命令来下载安装，更重要的是，若是咱们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm能够根据依赖关系，把全部依赖的包都下载下来并管理起来。

常见的使用场景有如下几种：

• 容许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 容许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 容许用户将本身编写的包或命令行程序上传到NPM服务器供别人使用。
• 输入命令npm -v，查看npm的版本号

 

Gulp

自动化地完成 javascript 、 coffee、 sass 、 less 、 html/image 、 css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

安装：

首先要全局安装一遍：

npm install --global gulp

全局的被安装在：C:\Users\26395\AppData\Roaming\npm\node_modules\gulp

 

全局安装gulp后，还须要在每一个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，而后在命令行中执行：

npm install --save-dev gulp

ps:能够在全部项目的根目录安装node_modules，这样就不用在每一个项目都去安装一遍

 

执行gulp时遇到问题：

Cannot find module ：

例如：Cannot find module 'gulp-uglify'，也就是缺乏gulp.js中所要用到的插件

执行命令安装对应的插件到总module文件同级目录下：

npm install --save-dev gulp-concat

会在node_modules同级目录生成一个package-lock.json文件，每次安装新的插件，这个文件会更新

 

多个插件一块儿安装：

npm install --save-dev gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del

 

gulp

安装插件被墙，在当前目录执行：

npm config set registry https://registry.npm.taobao.org

npm info underscore

 

gulp插件介绍：

 

运行gulp任务

需切换到存放 gulpfile.js 文件的目录，而后在命令行中执行gulp命令，gulp后面能够加上要执行的任务名，例如gulp task，若是没有指定任务名，则会执行任务名为default的默认任务。

G

ulp编写：

建立一个gulpfile.js在根目录下

 

加载插件：

var gulp = require('gulp'),

sass = require('gulp-ruby-sass'),

autoprefixer = require('gulp-autoprefixer'),

minifycss = require('gulp-minify-css'),

jshint = require('gulp-jshint'),

uglify = require('gulp-uglify'),

imagemin = require('gulp-imagemin'),

rename = require('gulp-rename'),

concat = require('gulp-concat'),

notify = require('gulp-notify'),

cache = require('gulp-cache'),

livereload = require('gulp-livereload'),

del = require('del');

上面的变量在下面的流管道工做中使用到。

 

创建任务：

任务api：

https://github.com/gulpjs/gulp/blob/master/docs/API.md

详细使用教程：https://blog.csdn.net/u012863664/article/details/72578582

运行：

 

Gulp任务工做流程：

gulp.src(ad_js_arr)

.pipe(concat("stcAd.js"))

.pipe(uglify())

.pipe(gulp.dest(path.rel));

 

gulp.src：设置须要处理的文件的路径，能够是多个文件以数组的形式[main.scss, vender.scss]，也能够是正则表达式/**/*.scss。

.pipe()这个API将须要处理的文件导向插件，通过插件处理后的流又能够继续导入到其余插件中，也能够把流写入到文件中。

gulp.dest()API设置生成文件的路径，一个任务能够有多个生成路径，一个能够输出未压缩的版本，另外一个能够输出压缩后的版本。

疑问：插件对文件的处理，又顺序的要求吗，好比得先压缩再怎么样

 

使用依赖优化gulp 命令：

当有多个任务时，须要知道怎么来控制任务的执行顺序。能够经过任务依赖来实现。例如我想要执行 one,two,three 这三个任务，那咱们就能够定义一个空的任务，而后把那三个任务当作这个空的任务的依赖就好了：

//只要执行default任务，就至关于把one,two,three这三个任务执行了

gulp.task('default',['one','two','three']);

若是任务相互之间没有依赖，任务就会按你书写的顺序来执行，若是有依赖的话则会先执行依赖的任务。

还有不少问题存在，好比 合并js的时候，使用 gulp-concat 生成的新js里面，原来html里面并无引用，还须要使用gulp-inject 来将生成的js注入到html，还有不少东西要学习。

异步任务处理：
若是某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务，若是咱们想等待 异步任务 中的异步操做完成后再执行后续的任务，参考

https://blog.csdn.net/u012863664/article/details/72578582 的三种实现方法