频道导航

基于Node.js的JavaScript项目构建工具gulp的使用教程

2019-01-03 Node.js 前端之家

前端之家收集整理的这篇文章主要介绍了基于Node.js的JavaScript项目构建工具gulp的使用教程，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

<div class="jb51code">
<pre class="brush:bash;">
npm install gulp --save-dev

什么是gulp？

gulp是新一代的前端项目构建工具，你可以使用gulp及其插件对你的项目代码（less,sass）进行编译，还可以压缩你的js和css代码，甚至压缩你的图片，gulp仅有少量的API，所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具，像Bower，Yeoman，Grunt等。

gulp和grunt的异同点

易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。因为gulp是用node.js写的，所以你需要在你的终端上安装好npm。npm是node.js的包管理器，所以先在你的机子上安装好node.js吧。

gulp安装命令

在根目录下新建package.json文件

安装gulp包

安装好后再次输入gulp -v查看版本号，如下图显示则为成功：

安装插件

安装常用插件：

sass的编译（gulp-ruby-sass）自动添加css前缀（gulp-autoprefixer）压缩css （gulp-minify-css） js代码校验（gulp-jshint）合并js文件（gulp-concat）压缩js代码（gulp-uglify）压缩图片（gulp-imagemin）自动刷新页面（gulp-livereload）图片缓存，只有图片替换了才压缩（gulp-cache）更改提醒（gulp-notify）清除文件（del）安装这些插件需要运行如下命令：

代码如下:

$ npm install 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 --save-dev

-save和-save-dev可以省掉你手动修改package.json文件的步骤。

自动把模块和版本号添加到dependencies部分

自动把模块和版本号添加到devdependencies部分

gulp命令

你仅仅需要知道的5个gulp命令

gulp.task(name[,deps],fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数

gulp.run(tasks...)：尽可能多的并行运行多个task

gulp.watch(glob,fn)：当glob内容发生改变时，执行fn

gulp.src(glob)：置需要处理的文件的路径，可以是多个文件以数组的形式，也可以是正则

gulp.dest(path[,options])：设置生成文件的路径 glob：可以是一个直接的文件路径。他的含义是模式匹配。 gulp将要处理的文件通过管道（pipe()）API导向相关插件。通过插件执行文件的处理任务。

gulp.task这个API用来创建任务，在命令行下可以输入$ gulp [default]，（中括号表示可选）来执行上面的任务。

gulp官方API文档：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 插件大全：http://gulpjs.com/plugins/

开始构建项目

在项目根目录下新建一个gulpfile.js文件，粘贴如下代码：

插件 var gulp = require('gulp'); var uglify = require('gulp-uglify');

gulp.task('compress',function(){
return gulp.src('script/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});

注：gulpfile.js文件名不可更改。项目需要用到uglify和rename插件，执行以下命令安装：

以我的为例，进入gulpfile.js所在目录：

然后输入：

gulp.task('compress',function(){
return gulp.src('script/*.js')
.pipe(uglify())
.pipe(rename('jquery.ui.min.js'))
.pipe(gulp.dest('dist'));
});

该命令会安装package.json下的全部依赖，如下图所示：

完整的gulpfile.js

// 样式
gulp.task('styles',function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded',}))
.pipe(autoprefixer('last 2 version','safari 5','ie 8','ie 9','opera 12.1','ios 6','android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
});

// 脚本
gulp.task('scripts',function() {
return gulp.src('src/scripts/*/.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});

// 图片
gulp.task('images',function() {
return gulp.src('src/images/*/')
.pipe(cache(imagemin({ optimizationLevel: 3,progressive: true,interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});

// 清理
gulp.task('clean',function() {
return gulp.src(['dist/styles','dist/scripts','dist/images'],{read: false})
.pipe(clean());
});

// 预设任务
gulp.task('default',['clean'],function() {
gulp.start('styles','scripts','images');
});

// 看守
gulp.task('watch',function() {

// 看守所有.scss档
gulp.watch('src/styles/*/.scss',['styles']);

// 看守所有.js档
gulp.watch('src/scripts/*/.js',['scripts']);

// 看守所有图片档
gulp.watch('src/images/*/',['images']);

// 建立即时重整伺服器
var server = livereload();

// 看守所有位在 dist/ 目录下的档案，一旦有更动，便进行重整
gulp.watch(['dist/**']).on('change',function(file) {
server.changed(file.path);
});

});

注：pipe()是stream模块里传递数据流的一个方法，第一个参数为插件方法，插件会接收从上游流下的文件，进行处理加工后，再往下流。

名称',function () { return gulp.src('文件路径') .pipe(...) .pipe(...) // 直到任务的最后一步 .pipe(...); });