2016-7-15(1)使用gulp构建一个项目

2023-08-02 10:46:04

gulp是前端开发过程中自动构建项目的工具，相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。

gulp是基于Nodejs的自动运行器，他借鉴了Unix操作系统的管道（pipe）思想，前一级的输出是后一级的输入。下面是具体流程：

1、安装nodejs

nodejs下载地址：https://nodejs.org/

nodejs自带npm模块管理器，安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功

常用的npm命令

npm init——初始化

npm install——安装插件

npm install plugname -g——全局安装

npm install plugname@2.3.0——安装具体某个版本的插件

npm update——更新插件

npm uninstall——卸载插件

常用dos命令

cd 进入某个目录

cd.. 返回上一级

dir 查看列表

cls 清除屏幕

del name 删除文件

md name 新建目录名

rd name 删除目录名

copy con name.txt 新建文件

del name.txt 删除文件

2、全局安装gulp

npm install gulp -g

3、创建本地项目

上面是准备工作，安装完全局gulp之后，cd到项目文件夹安装本地gulp，安装之前要先初始化

npm init

初始化的时候要求你输入一些值，不输的直接回车即可，点击y之后在根目录自动创建了一
个package.json文件，这个文件用来存放即将安装的插件name和version，这个文件有什么用呢？当我们把项目拷贝给别人的时候不需要拷
贝插件，只需要把项目文件、package.json和gulp.file.js拷贝过去就可以，接收人cd到项目文件目录直接输入npm
install即可安装上我们拷贝前安装的各种插件。

4、设计项目目录索引结构

└── src/
├── less/ *.less 文件
├── sass/ *.scss *.sass 文件
├── css/ *.css 文件
├── js/ *.js 文件
├── fonts/ 字体文件
└── images/ 图片
└── dist/

5、安装各种插件

npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2 --save-dev

--save-dev这个命令是将安装的插件信息写入package.json文件内的“devDependencies”属性内，插件全部安装完之后package.json的变化为：

"devDependencies": {
"gulp": "^3.9.1",
"gulp-imagemin": "^2.3.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"gulp-watch-path": "^0.1.0",
"stream-combiner2": "^1.1.1"
}

插件安装完毕之后会自动创建一个node_modules文件夹，所有插件的依赖都存在这里面。

gulp——本地gulp
gulp-imagemin——图片压缩
gulp-minify-css ——css压缩
gulp-uglify ——js压缩
gulp-util ——控制台代码着色
gulp-watch-path ——文件很多时编辑那个哪个压缩，不会全部压缩（获取改变的文件的src和dest路径）
stream-combiner2——有些 gulp 任务编译出错会终止 gulp.watch，使用 gulp-watch-path 配合stream-combiner2 可避免这种情况

6、gulp如何使用

控制台输入gulp的时候首先找寻gulpfile.js文件，在找寻default任务，所以我们应该手动新建一个名为gulpfile.js的js文件，将任务写在里面。具体文件目录为：

gulp一共五中方法：

gulp.task()——新建任务

gulp.src()——获取文件源地址

gulp.dest()——文件输出地址

gulp.run()——运行任务

gulp.watch()——监听文件修改

7、编写gulpfile.js文件

（1）引入插件变量

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
minifycss = require('gulp-minify-css'),
imgmin = require('gulp-imagemin'),
gutil = require('gulp-util'),
watchPath = require('gulp-watch-path'),
combiner = require('stream-combiner2');

（2）新建代码着色与显示错误日志方法，这个方法用到了gulp-util和stream-combiner2插件

var handleError=function(err){
console.log('\n');
gutil.log('fileName: '+gutil.colors.red(err.fileName));
gutil.log('lineNumber: '+gutil.colors.red(err.lineNumber));
gutil.log('message: ' + err.message);
gutil.log('plugin: ' + gutil.colors.yellow(err.plugin));
};

（3）新建js批量压缩任务

gulp.task('script',function(){//script时自定义的
//将文件的源路径和发布路径赋值给相应变量
var srcJsPath='js/*.js';
var destJsPath='dist/js/';
var combined = combiner.obj([
gulp.src(srcJsPath),//获取文件源地址
uglify(),//执行压缩
gulp.dest(destJsPath)//将压缩的文件发布到新路径
]);
combined.on('error', handleError);//打印错误日志
});

这种写法需要css目录下有很多css文件，只要改变了一个点击保存的时候gulp会把所有css文件都会压缩一遍，为了提高性能我们可以利用gulp-watch-path插件只压缩/发布修改的文件

gulp.task('watchjs',function(){
gulp.watch('js/*.js',function(event){
var paths=watchPath(event,'js/','dist/js/');
//打印修改类型和路径
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
gutil.log('Dist: ' + paths.distPath);
//获取错误信息，继续执行代码
var combined = combiner.obj([
gulp.src(paths.srcPath),
uglify(),
gulp.dest(paths.distDir)
]);
combined.on('error', handleError);
});
});

（4）编写default任务和监听任务

新建批量任务还是监听修改任务根据项目中实际需要去写，等我们写好很多任务之后就需要写入default中，default写好之后只需要在dos窗口写入gulp就可以自动执行任务

gulp.task('default',function(){
//默认执行的方法，引号内的内容对应上面task写的内容
gulp.run('watchjs','css','images');
//监控js
gulp.watch('js/*.js',['watchjs']);
//监控css
gulp.watch('css/*.css',['css']);
//监控img
gulp.watch('images/*.*',['images']);
});

如果不想执行默认任务只执行js单文件压缩任务只需要输入 gulp watchjs即可。控制台输入为下图：

此时，gulp处于监听状态，如果要取消需要按ctrl+c 回车即可。

码农公寓