什么是gulp
gulp 英 [gʌlp] 狼吞虎咽地吃；大口地吸
gulp 本身有狼吞虎咽的意思，最主要是通过各种 Transform Stream 来实现文件的处理，然后再进行输出。Transform Streams 是NodeJS Stream 的一种，是可读又可写的，它会对传给它的对象做一些转换的操作。
说人话就是对文件(js,sass,less...)写入内存，进行任务处理，再写出到磁盘。
gulp的只提供几个api：
gulp.src：获取文件
gulp.dest：写入文件
gulp.tasks：注册任务
gulp.watch：监控文件的改动
开始 gulp
安装 gulp 需要 基于 nodejs ，所以先理解几个概念：
1、node.js 是什么？ Node.js是一个Javascript运行环境(runtime)。 实际上是对 google 引擎 v8
做了封装。也就是说，本来一个js 文件是要在浏览器才能执行的 ， 但有了 nodeJs 运行环境，你的 IDE 就可以执行 js
文件了，不需要跑在浏览器执行！！2、npm 是什么？ 正因为 nodeJs 的好用 ，所以后人就陆续开发了好多 node 插件 ，而 npm 及是 nodeJs 的
包管理器 ，用于 node 插件管理（包括安装、卸载、管理依赖等）。所以 node 插件（下面的 gulp 工具） 就可以利用 npm 来进行安装或卸载咯。3、gulp 是什么？ 说白了就是一个 自动构建工具 gulp是基于Nodejs的自动任务运行器，
她能自动化地完成javascript/coffee/sass/less/html/image/css
等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
1、安装 node.js
所以呢，第一步先安装 node.js ----> node.js 官网
到官网下载下来安装便是，这里不多解释，
然后简单检查一下是否安装成功：
node -v // 正常情况输出你安装的 node 版本号
npm -v // 正常情况输出你安装的 npm 版本号
2、安装 gulp
接下来安装 gulp
npm install -g gulp
如果提示错误就 重新输入 ： sudo npm install -g gulp
-g表示在全局环境安装，以便任何项目都能使用它
稍等片刻，安装完毕同样检查一下版本号，看是否安装成功：
gulp -v // 正常情况输出你安装的 gulp 版本号
接下来新建个文件夹，用来存放你的新工程，
3、在跟目录下创建 package.json文件：
package.json文件有什么用呢？
是为了指明项目在开发环境和生产环境中的node模块依懒关系。其实它还有一个重要的功能就是开源库的版本依赖管理，这个要解释还需要点篇幅，放在文章最后面解释吧
要生成 package.json文件 只需在你的项目根目录执行 npm init 就行：
image.png
4、选择安装你所需的依赖
比如上面提到的 检查 js 文件的 gulp-jshint 依赖，将 sass 编译成 css 的 gulp-sass 依赖等等...
执行在你所在的根目录下执行下面命令：
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
这时，你的项目目录就有如下内容：
image.png
5、新建gulpfile.js 文件
为什么 gulp 项目能自动检测 js 代码的错误呢，就应为 有了 gulpfile文件在起作用：
gulpfile.js
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 检查脚本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 编译Sass , 会将 scss/文件夹下的 .scss 文件编译成 .css 文件放在 /css文件夹下
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 合并，压缩文件，将 js文件夹下的js文件合并压缩成 all.js 放在 /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'));
});
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化，有了监听，当你编写 js 或 sacc 文件时就会自动编译
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
将上面的代码 gulpfile.js 保存到 更目录下就可以开始你的 项目咯！
6、运行 带有gulp构建工具的 项目：
上面键好项目后，创建个 js文件夹，里面有两个测试用的 js 文件
image.png
里面的代码是：
$(function () {
alert(" test_js1");
});
7、然后启动构建工具 gulp
用 WebStrom 打开你的项目：
image.png
当编译不成功，出现 不支持 gulp.run 怎么办
将代码：
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化，有了监听，当你编写 js 或 sacc 文件时就会自动编译
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
替换成下面的
// 默认任务
gulp.task('default', function(){
// 监听文件变化
gulp.watch('./js/*.js', ['lint', 'sass', 'scripts']);
});
你的项目多出了这些文件：
image.png
打开 all.js
发现它将 咱们创建的两个 js 文件合并到一块了！！！
image.png
这里小提示一下，为什么要把 js 文件 合并到一个
总的js文件里呢？减少网络请求呀，一个js文件才请求一次，要是你的项目有多个js文件那不得请求多次，不利于优化。 all.min.js 是对
all.js 的压缩
这就是 自动化构建工具 gulp ！！！
转载自：曾田生z 的博客文章
网友评论