发布于 由Marszm

Gulp新人指南-4 优化压缩图片，字体，合并任务。

Post Views: 546

优化图片

你应该已经猜到了，我们需要一个插件gulp-imagemin帮助我门来优化图片。

$ npm install gulp-imagemin --save-dev
var imagemin = require('gulp-imagemin');

通过插件我们可以压缩png,jpg,gif甚至 svg。

让我们创建一个imgages任务来优化流程。

gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
  .pipe(imagemin())
  .pipe(gulp.dest('dist/images'))
});

由于不同类型可以被不同的方法优化，可以增加一些参数设置到imagemin去自定每个文件如何优化。

例如，你可以通过设置interlaced设置为true 创建一个 interlaced GIFs 。

gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
  .pipe(imagemin({
      // Setting interlaced to true
      interlaced: true
    }))
  .pipe(gulp.dest('dist/images'))
});

你也可以试试其他的参数。

优化图片，是相当耗费时间的，你肯定不想每次都重复执行。我们可以使用gulp-cache插件来避免这种情况。

$ npm install gulp-cache --save-dev
var cache = require('gulp-cache');

gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
  // Caching images that ran through imagemin
  .pipe(cache(imagemin({
      interlaced: true
    })))
  .pipe(gulp.dest('dist/images'))
});

我们基本上快完成了优化流程。另外一个额外问题的是字体目录。

#复制字体到发布目录

由于字体已经是优化过的，我们不用做更多，只要复制过去。

我们可以简单的用gulp 复制，指定gulp.src 和gulp.dest。不需要别的插件了。

gulp.task('fonts', function() {
  return gulp.src('app/fonts/**/*')
  .pipe(gulp.dest('dist/fonts'))
})

现在任何时候执行gulp fonts，gulp会复制字体从app到dist。

我们现在有6个不同的任务在gulp文件里。每个都用独立的命令执行，这样很麻烦。所以我们接下来要一行命令全部执行。

在此之前，我们先看一下如何自动清除已经生成的文件。

#自动清除生成的文件

由于文件是自动生成的，我们需要确保无用的文件不保留。

 

这个任务叫做清理。

我们用del来帮助清理

npm install del --save-dev
var del = require('del');

del方法可以利用数组来告诉那些目录需要删除

将这个任务放在最顶。

gulp.task('clean:dist', function() {
  return del.sync('dist');
})

现在执行命令gulp会删除dist文件夹下的文件。

提示，不需要单行会删除dist/images文件下内容因为使用了gulp-cache会缓存图片到你的本地系统。

想要删除缓存，你可以创建一个任务如下。

gulp.task(‘cache:clear’, function (callback) {
return cache.clearAll(callback)
})

Phew, that’s a mouthful.

让我们来组合全部的任务吧。

#合并所有任务

我们回顾下我们做的事情。到现在我们创建了两组发布任务。

第一组是开发进程，我们将sass打包成css，监测变化，重载浏览器。

另一组是优化流程，我们将所有文件打包到正式环境。我们优化了资源，css，js，图片，文字然后从app复制到dist。

我们可以将第一组任务组合为一个简单的工作流。

使用gulp wath命令。

gulp.task('watch', ['browserSync', 'sass'], function (){
  // ... watchers
})

第二组任务包括 clean:dist, sass, useref, images 和 fonts。

如果我们按照之前的思路。我们可以创建一个build任务 全部合并到一起。像下面。

gulp.task('build', [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
  console.log('Building files');
})

很不幸我们，我们没法这么做，因为第二个参数里的任务会全部同时执行。

这样会导致可能出现最后执行clean。

所以要确保clean先执行完，我们需要一个插件 Run Sequence。

$ npm install run-sequence --save-dev

序列执行的语法如下:

var runSequence = require('run-sequence');

gulp.task('task-name', function(callback) {
  runSequence('task-one', 'task-two', 'task-three', callback);
});

当task-name被调用，gulp会先执行task-one，然后当one执行完毕，再自动执行two，three。

序列执行也可以同时执行多个任务。如果把任务放到一个数组里，如下。

gulp.task('task-name', function(callback) {
  runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback);
});

所以我们可以这样写。

gulp.task('build', function (callback) {
  runSequence('clean:dist', 
    ['sass', 'useref', 'images', 'fonts'],
    callback
  )
})

为了保持一致，我们也可以创建一个相同的序列给第一组，如下。这个是非打包进行的。

gulp.task('default', function (callback) {
  runSequence(['sass','browserSync', 'watch'],
    callback
  )
})

为什么用default，因为default名称的任务，可以直接输入gulp执行。

最终项目可以在github repo 上查看。

#结束语

最后我们体验了整基础的gulp工作流程，包括编译Sass到Css，监视html，js变化显示到浏览器。

我们还创建了第二个任务，build。打包到dist文件夹下，发布生产环境。编译Sass到CSS，还加上优化资源，复制需要的文件过去dist文件夹下。

我们只需要执行gulp build就可以运行任务。

最后，我们还有一个clean任务清理dist文件夹的旧文档。

We’ve created a robust workflow so far that’s capable enough for most web developers. There’s a lot more to Gulp and workflows that we can explore to make this process even better. Here are some ideas for you:

我们当前创建了一个不错的工作流，可以应付大多数开发者。还有更多gulp和工作流可以探索让进程更加好。这里有些提示给你：

对于开发:

对于优化:

  • 使用 unCSS 移除无用的CSS
  • 使用 CSSO 进一步优化CSS
  • 使用 Critical 生成inlineCSS 提高效率

除了开发和优化流程，你还可以写JS的单元测试，用gulp-jasmine。设置直接部署dist到生产环境，使用gulp-rync.

如你所见，虽然我们做的工作流做了不少事，但是还有更多的事情可以做。创建一个量身定做的工作流会非常的令人舒爽。

automating your workflow,

grab ten chapters for free

留言让我知道你是不是认为这篇文章有用，随意联系我。我很乐意回复。

原文  https://css-tricks.com/gulp-for-beginners/

发表评论

邮箱地址不会被公开。