gulp 快速上手

gulp –快速上手

gulp是一个nodejs的streaming构建工具,所谓的streaming大致意思就是把构建流程想成一个个链接的管道(pipe)。
对于小白,一般每天的工作模式—–不停的保存、刷新、调试你的前端项目。恩。。。。有些繁琐不是么,gulp, 就可以解放你频繁的此类操作,大大加快你的开发效率。
当然,gulp能做的不止是这些。、Sass/less ->css , css压缩, js混淆,img尺寸优化,html压缩等等,都可以做到。
需要注意的是,Gulp的所有功能都依赖于插件,下面会详细介绍。
恩,没错,gulp 是开发阶段的依赖。主要用于提升开发效率。前端重复的轮子很多,类似的工具还有grunt。 不过还是推荐你用gulp , why ?
下面来看看二者的 区别,你就很快能明白了。

gulp vs grunt , 为什么选择gulp ?

易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码。

高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件。

高质量 Gulp的每个插件只完成一个功能,这也是Unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:Grunt的imagemin插件不仅压缩图片,同时还包括缓存功能。他表示,在Gulp中,缓存是另一个插件,可以被别的插件使用,这样就促进了插件的可重用性。目前官方列出的有673个插件。

易学 Gulp的核心API只有5个,掌握了5个API就学会了Gulp,之后便可以通过管道流组合自己想要的任务。

用法

五个api

gulp.src(globs[, options])
//指定源文件,

gulp.dest(path[, options])
//处理后的文件存放目录

gulp.task(name[, deps], fn)
//设置事件,你是要压缩,还是less转换啊等等。

gulp.watch(glob [, opts], tasks)
gulp.watch(glob[, opts, cb])
//上面两个监听你的操作,根据代码该表调用相关事件渲染到浏览器。解放双手,即改即看。

1.在项目目录下
$npm init

$npm install gulp -g

$npm install gulp --save-dev

2. 在项目根目录下创建gulpfile.js文件。所有的gulp相关命令都在这个文件里编辑。
3. 安装gulp依赖包,如:gulp-uglify, gulp-cssnano等等。
4. 运行: gulp serve // serve 即要执行的task

好,说了这么多,举个栗子吧!


'use strict';
/**
 * 本例子要实现以下:
 * 1. LESS编译 压缩 合并
 * 2. JS合并 压缩 混淆
 * 3. img复制
 * 4. html压缩
 */

// 在gulpfile中先载入gulp包,因为这个包提供了一些API
var gulp = require('gulp');
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');

// 1. LESS编译 压缩 --合并没有必要,一般预处理CSS都可以导包
gulp.task('style', function() {
  // 这里是在执行style任务时自动执行的
  gulp.src(['src/styles/*.less', '!src/styles/_*.less'])
    .pipe(less())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/styles'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// 2. JS合并 压缩混淆
gulp.task('script', function() {
  gulp.src('src/scripts/*.js')
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// 3. 图片复制
gulp.task('image', function() {
  gulp.src('src/images/*.*')
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var htmlmin = require('gulp-htmlmin');
// 4. HTML
gulp.task('html', function() {
  gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true
    }))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var browserSync = require('browser-sync');
gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: ['dist']
    },
  }, function(err, bs) {
    console.log(bs.options.getIn(["urls", "local"]));
  });

  gulp.watch('src/styles/*.less',['style']);
  gulp.watch('src/scripts/*.js',['script']);
  gulp.watch('src/images/*.*',['image']);
  gulp.watch('src/*.html',['html']);
});

代码示例github地址:
最后,看明白了也要自己操作一下哈,看的快忘得快。操作几次就记住了。动手做几个自己的gulp工作流吧~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值