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

优化图片

你应该已经猜到了,我们需要一个插件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/

发表评论

邮箱地址不会被公开。