创新路
我们一直在努力

Gulp前端自动化工具新手入门教程(2)

接下来说说优化方面的技巧

优化CSS和JavaScript文件

说到优化的时候,我们需要想到:压缩,拼接。也就是减少体积和HTTP次数。

开发者面临的主要问题是很难按照正确的顺序合并文件。

<body>
  <!-- other stuff -->
  <script src="js/lib/a-library.js"></script>
  <script src="js/lib/another-library.js"></script>
  <script src="js/main.js"></script>
</body>

由于文件路径的的不同,使用 https://www.npmjs.com/package/gulp-concat 等插件非常困难。

庆幸的是, gulp-useref 解决了这个问题。

gulp-useref会将多个文件拼接成单一文件,并输出到相应目录。

<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

可以是js,css,或者remove。如果你设为remove,Gulp将不会生成文件。

指定产出路径。

我们想最终产出main.min.js。可以这样写:

<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

我们来安装gulp-useref。

$ npm install gulp-useref --save-dev

引用

var useref = require('gulp-useref');

使用起来非常简单:

gulp.task('useref', function(){

  return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

(新版的gulp-useref已经不需要写多余的useref.assets了)

执行useref命令,Gulp将合并三个script标签成一个文件,并保存到dist/js/main.min.js。

合并完之后,我们再来压缩。使用gulp-uglify插件。

安装

$ npm install gulp-uglify --save-dev

使用

// Other requires...
var uglify = require('gulp-uglify');
gulp.task('useref', function(){
  return gulp.src('app/*.html')
    .pipe(uglify()) // Uglifies Javascript files
    .pipe(useref())
    .pipe(gulp.dest('dist'))
});

搞定!

注意:执行完useref后,html中的script路径将只剩下main.min.js。

王祖蓝:完美~

gulp-useref同样可以用在css上。除了压缩,需要区分,其它内容同js一样。所以我们使用gulp-if来做不同处理。

使用gulp-minify-css压缩css。

$ npm install gulp-if gulp-minify-css --save-dev

应用

var gulpIf = require('gulp-if');
var minifyCSS = require('gulp-minify-css');

gulp.task('useref', function(){

  return gulp.src('app/*.html')
    // Minifies only if it's a CSS file
    .pipe(gulpIf('*.css', minifyCSS()))
    // Uglifies only if it's a Javascript file
    .pipe(gulpIf('*.js', uglify()))
    .pipe(useref())
    .pipe(gulp.dest('dist'))
});

搞定!

再说说如何压缩图片。同样easy。

优化图片

使用gulp-imagemin插件。

$ npm install gulp-imagemin --save-dev

引入,使用

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

(所有的gulp插件都是有相关参数可以配置,如果需要,请自行查看。)

压缩图片可能会占用较长时间,使用 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'))
});

接下来,我们说说发布流程。

清理生成文件

由于我们是自动生成文件,我们不想旧文件掺杂进来。

使用 del

npm install del --save-dev

引入、使用

var del = require('del');
gulp.task('clean', function() {
  del('dist');
});

但是我们又不想图片被删除(图片改动的几率不大),启用新的任务。

gulp.task('clean:dist', function(callback){
  del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});

这个任务会删除,除了images/文件夹,dist下的任意文件。为了知道clean:dist任务什么时候完成,我们需要提供callback参数。

在某些时候我们还是需要清除图片,所以clean任务我们还需要保留。

gulp.task('clean', function(callback) {
  del('dist');
  return cache.clearAll(callback);
})

噢,我真的是废话太多了。把我们学到的组合到一块吧!

组合Gulp任务

废话了这么多,我们主要有两条线路。

第一条是开发过程,我们便以Sass,监听文件,刷新浏览器。

第二条是优化,我们优化CSS,JavaScript,压缩图片,并把资源从app移动到dist。

开发任务我们上面的watch已经组装好了。

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

我们也做一个来执行第二条线路。

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

但是这样Gulp会同时触发 [] 的事件。我们要让clean在其他任务之前完成。

这里要用到 RunSequence 。

$ 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,task-two,task-thre。

RunSequence也允许你同时执行多个任务。

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
  )
})

开发任务我们也用runSequence:

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

default? 如果你的任务名字叫做default,那么只需要输入gulp命令即可执行。

这里是我们最终的 代码仓库 。

总结

上面的的内容搭建了一个基本的Gulp工作流。还有更精彩的内容等着你去开发。

未经允许不得转载:天府数据港官方信息博客 » Gulp前端自动化工具新手入门教程(2)

客官点个赞呗! (1)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机