井井客

搜索

gulp.js入门篇

项目中一直用的webpack,以前对gulp也只是囫囵看了一下,算不上多了解,花了一天时间再翻看了一下,好像有种提壶灌顶的感觉,其实换一种思路来看,会觉得不过如此。

gulp.js入门篇

细节不多说,主要说一下我在学习gulp过程中的理解。关于gulp的api和细节可以去gulp官网阅读。

首先我们都知道gulp是前端构建工具,可以帮助我们压缩/合并文件、编译预处理样式(sass、less)、js编码规范、自动刷新浏览器等等。而在使用这些功能前,先看一下gulp任务(task)是什么?

全局安装gulp以及项目中将gulp加入依赖也不说了。现在我们先在项目根目录创建gulpfile.js的文件,并且在头部引入gulp.js。

var gulp = require('gulp');

然后我们可以定义一个任务,这个任务的名称可以自定义。如:

gulp.task("自定义任务名称", function() {
  // 将你的任务代码放在这
});

我们通过在终端执行gulp命令来执行任务。如:

gulp 自定义任务名称

而如果想在终端直接执行gulp命令,不想加啥任务名称,则可以在gulpfile中定义默认任务,即任务名称为default,否则会报错。如:

gulp.task("default", function() {
  // 将你的任务代码放在这
});

接下来就要了解任务代码是什么样子,这个也好理解,一般我们去做事情都要知道一个来龙去脉。文件来源使用gulp.src,文件去处使用gulp.dest,中间使用.pipe进行连接。如:

gulp.src('less/*.less')
  .pipe(gulp.dest('dist/css/'));

但是上面这样写也只是将less文件夹下面的文件,复制了一份到dist/css文件夹下面而已。我们需要将less预编译文件转为css文件。

这时我们就需要使用到插件了,像之前说的那些功能,其实就是gulp的各类插件,一般在项目中安装完插件后在gulpfile头部引入,再在任务代码来龙去脉的中间插入.pipe()进行使用。如一个简单的less处理任务像这样:

var gulp = require('gulp');
var less = require('gulp-less');
gulp.task("less", function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css/'));
});

一个任务就是如此简单,而如果想使用其它功能,其实和这个也是差不多套路。小伙伴可以在https://www.npmjs.com/search?q=gulp中查找gulp的插件,里面有说明。

有些插件中能看到gulp.src前面加return的情况,是关于gulp流是异步执行的问题,可以在网上了解一下。

而监听文件变化自动编译则是关于gulp.watch方法的使用,也不在此赘述,官网上面有说明的。

说一下常用的一些gulp插件

gulp-plumber       gulp错误处理
gulp-error         可以配合gulp-plumber提示错误
gulp-uglify        代码压缩混淆
gulp-sass          同gulp-less,针对预处理样式编译      
gulp-autoprefix    为样式添加浏览器前缀
gulp-px2rem        px转rem单位
gulp-babel         使用下一代Js,像es6可以在项目中使用
gulp-eslint        Js代码标准化
gulp-htmlmin       压缩html代码
gulp-imagemin      压缩图片
gulp-sourcemaps    生成文件源文件映射
gulp-rename        文件改名
gulp-sequence      顺序执行任务
...

大致的情况就是这样了~欢迎学习交流

文章TAG:JS

作者:井井客原创来源:原创
本文标题:gulp.js入门篇
本文链接:/c/31328.html

上一篇:Handlebars.js模板引擎
下一篇:聊一聊数据库

文章分类

相关阅读

随便看看