作者:谌吉 @前端之道发布于:06-03 00:52阅读:343700

cover

引言

很早就听说过 gulp.js, grunt.js 等自动化构建工具,一直苦于入门无方,直到昨日在朋友 垒哥 的督促下找到了这么一个 Github 项目 —— gulp 入门指南,先上目录:

  • 安装 Node 和 gulp
  • 使用 gulp 压缩 JS
  • 使用 gulp 压缩 CSS
  • 使用 gulp 压缩图片
  • 使用 gulp 编译 LESS
  • 使用 gulp 编译 Sass
  • 使用 gulp 构建一个项目

对于完全的初学者来说,完成官方 Gulp 入门指南 后就是一头雾水,本身面对大量框架、代码已经是件头疼的事,再来一个有着各种命令的工具实在是眼花缭乱。

这个 github 项目有中文作者编写,从目录就可以看出基本上是新手都会常用到的内容,所以理解起来也方便很多,下面就说一下我实践过程中遇到的坑。

实践入坑

实践环境

  • node v6.2.0
  • npm 3.9.5

安装

安装章节无需多言,直接略过。

使用 gulp 压缩 JS

刚开始写好 gulpfile.js 文件,终端进入目录执行 gulp 时,提示了这么一段内容:

(node:16824) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

stackoverflow 之 得到解答,需要直接更新 nam 解决

sudo npm update -g nam

更新前运行 npm info graceful-fs -v 得到版本号为

3.8.9

更新后为

3.9.5

done! 才怪

尽管问题没解决,但貌似没影响目前 gulp 的进程,暂时先把这个问题放一放,此阶段的 gulpfile.js 代码如下:

// 获取 gulp
var gulp = require('gulp');
// 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify');

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {

 gulp.src('js/menu.js')
  .pipe(uglify())
  .pipe(gulp.dest('dist/js')),

 gulp.src('js/smooth-scroll.js')
  .pipe(uglify())
  .pipe(gulp.dest('dist/js'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function() {
 gulp.watch('js/*.js', ['script']),
 gulp.watch('css/*.css', ['css']),
 gulp.watch('images/*.*', ['images'])
});

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto']);

使用 gulp 压缩 CSS

CSS 压缩任务的书写方式大同小异,具体可查看 github demo 源码

使用 gulp 压缩 图片

压缩图片的任务书写差异主要在于

gulp.task('images', function() {
 gulp.src('images/*.*')
  // 此处函数内多了一条命令语句
  .pipe(imagemin({
   progressive: true
  }))
  .pipe(gulp.dest('dist/images'))
});

使用 gulp 编译 LESS

差异不大,略。

使用 gulp 编译 SASS

差异在于

gulp.task('sass', function() {
    // 查找 sass 文件的语句不同
    return sass('sass/') 
    // 抛出异常语句
    .on('error', function (err) {
      console.error('Error!', err.message);
    })
    .pipe(gulp.dest('dist/css'))
});

使用 gulp 开发一个项目

  • 安装依赖: 使用 npm 来利用 package.json 保存所有 npm install --save-dev gulp-xxx 模块依赖和模块版本。

    • 由此将这份 gulpfile.js 配置分享给你的朋友时,就不需要将 node_modules/ 发送给他,他只需在命令行输入。
  • gulp-util: 让命令行输出的文字带颜色。

  • gulp-watch-path: 检测修改文件,并只重新编译修改文件,以节省性能。

  • stream-combiner2: 检测 JS 语法错误。

使用 gulp 秘籍 (技巧集)

在完成上面的内容后,就可以到官网上快速学习其它秘籍,举个栗子:

使用 gulp-rename 然后 pipe 到 dest 两次来实现:

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

var DEST = 'build/';

gulp.task('default', function() {
  return gulp.src('foo.js')
    // 这会输出一个未压缩过的版本
    .pipe(gulp.dest(DEST))
    // 这会输出一个压缩过的并且重命名未 foo.min.js 的文件
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest(DEST));
});

此篇转自我自己的 独立博客,欢迎来踩。

参考文献:

快来这里总结下学到的知识吧!

新建笔记