发布于 由Marszm

Gulp新人指南-3 优化CSS和JS文件

Post Views: 582

优化CSS和JS文件

开发者通常会用两个任务来优化CSS和JS，压缩和拼接concatenation （也不知道翻译的对不对）.

一个开发者面对的问题是，自动编译很难正确拼接.

例如，我们引入3个脚本到index.html.

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

这些脚本放到了两个不同的目录下，使用传统插件如 gulp-concatenate会比较难拼接.

幸亏，还有个好用的插件,gulp-useref 解决这个问题。

Gulp-useref 拼接任意数量的CSS和JS文件到一个单一的文件通过注释语句

“<!–build:” 结束”<!–endbuild–>”. 语法如下:

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

<type>可以是 js，css，或者remove。最好设置为你想拼接的类型。如果设置成remove，gulp会把整个build里面的内容全删除。

<path> 是生成的目标路径。

创建下面的3个js文件。内容随便写点什么。

我们想把JS都打包到JS文件夹，成为main.min.js.写法如下。

写在index.html里面记得。

<!--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');

设置useref任务和之前差不多。

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

(在此之前你需要在创建上面说到的那些js文件）。像这样

 

现在如果你执行useref任务，Gulp会将3个js打包成一个dist/js/main.min.js.

不过现在代码并没有被压缩，我们还需要gulp-uglify插件帮组压缩js。同时我们还需要第二个插件叫做gulp-if 去确保我们只尝试压缩js文件

$ npm install gulp-uglify --save-dev 
// Other requires...
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');

gulp.task('useref', function(){
  return gulp.src('app/*.html')
    .pipe(useref())
    // Minifies only if it's a JavaScript file
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulp.dest('dist'))
});

现在执行userref任务 gulp会自动压缩最小化到’main.min.js’文件

当打包后gulp-useref还会自动把”<!–build:” and “<!–endbuild–>”转换成一行引用。

是不是很简洁？

我们可以使用同样的方法去压缩CSS文件。同样创建build

<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/another-stylesheet.css">
<!--endbuild-->

我们需要gulp-cssnano插件，代码如下.

$ npm install gulp-cssnano
var cssnano = require('gulp-cssnano');

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

每当你执行useref任务，可以得到一个优化后的CSS文件和一个优化后的JS文件。

我们接下来会优化图片。

发表评论

邮箱地址不会被公开。