[gulp] Gulp 基本功能实践 – 技术学习小组

前段时间跟着学习小组进行了 gulp 的学习，对 gulp 算是有了个初步的，空洞的了解。最近两周，一直在进行前端代码编写，很多工程化的需求逐渐出现，于是开始实践 gulp，试图形成一个稳定的工作流程。

可以在 https://github.com/YanisJ/ife-mission-starter 查看到项目完整结构和内容。

由于我很可能会对项目进行修改，如果遇到文章中内容与项目内容冲突，以项目为准。我也会经常更新文章。

浏览器自动刷新

Live reloading 绝对是一个刚性需求，自然就成为了我第一个需要解决的问题。在 ng2 的学习中，接触到了 lite-server：一个简易服务器，不需任何配置，提供 browser-sync 的功能。由于它实在是简单易用，成为了我的第一个选择。

于是我对 package.json 进行了简单的修改：

"devDependencies":{
  "lite-server":"^2.1.0"
},
"scripts":{
  "start": "lite-server"
}

"devDependencies":{

"lite-server":"^2.1.0"

"scripts":{

"start": "lite-server"

}

安装：

npm install

1 2	npm install

启动：

npm start

npm start

这样，就有了一个具备自动刷新功能的工作环境。

开始使用 gulp

很快，我碰到了第二个需求，我的代码需要有在线 demo，最好能将 CSS，JavaScript 代码进行一些处理。其实，demo 里的这些代码量有限，处不处理意义不大，但这里存在一个相关的问题：图片。Demo 虽然小，但图片总是有的，压缩对于图片来说意义就大多了。

经过一番查阅，我在 gulp 插件搜索页面找到了几个需要用到的插件：

gulp-clean-css：压缩 CSS 文件；
gulp-imagemin：压缩图片；
del：在开始任务前将已有的压缩文件删除掉。

这里没有关于 JavaScript 的任何插件，因为按我目前的实际情况来说，压缩 JavaScript 代码不是一个好主意。插件确定了，开始修改 package.json：

"devDependencies":{
  "lite-server":"^2.1.0",
  "gulp":"^3.9.1",
  "gulp-clean-css":"^2.0.3",
  "gulp-imagemin":"^2.4.0",
  "del":"^2.2.0"
},
"scripts":{
  "start": "lite-server"
}

"devDependencies":{

"lite-server":"^2.1.0",

"gulp":"^3.9.1",

"gulp-clean-css":"^2.0.3",

"gulp-imagemin":"^2.4.0",

"del":"^2.2.0"

"scripts":{

"start": "lite-server"

}

然后，创建了 gulpfile.js：

var gulp     = require('gulp');

var cleanCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');
var del      = require('del');

// 管理路径
var src_dir = 'src',
    dst_dir = 'dist';
var paths = {
  html:   src_dir + '*/*.html',
  css:    src_dir + '*/*.css',
  js:     src_dir + '*/*.js',
  images: src_dir + '*/img/**/*'
};

// 删除上一次压缩
gulp.task('clean', function () {
  return del(dst_dir);
});
// 处理 HTML：直接拷贝到输出文件夹
gulp.task('html', ['clean'], function () {
  return gulp.src(paths.html)
    .pipe(gulp.dest(dst_dir));
});
// 处理 CSS
gulp.task('css', ['clean'], function () {
  return gulp.src(paths.css)
    .pipe(cleanCSS())   // 压缩 CSS
    .pipe(gulp.dest(dst_dir));
});
// 处理 JavaScript：直接拷贝到输出文件夹
gulp.task('js', ['clean'], function () {
  return gulp.src(paths.js)
    .pipe(gulp.dest(dst_dir));
});
// 处理图片
gulp.task('images', ['clean'], function () {
  return gulp.src(paths.images)
    .pipe(imagemin({optimizationLevel: 5})) // 压缩图片
    .pipe(gulp.dest(dst_dir));
});

gulp.task('default', [ 'html', 'css', 'js', 'images']);

var gulp = require('gulp');

var cleanCSS = require('gulp-clean-css');

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

var del = require('del');

// 管理路径

var src_dir = 'src',

dst_dir = 'dist';

var paths = {

html: src_dir + '*/*.html',

css: src_dir + '*/*.css',

js: src_dir + '*/*.js',

images: src_dir + '*/img/**/*'

};

// 删除上一次压缩

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

return del(dst_dir);

});

// 处理 HTML：直接拷贝到输出文件夹

gulp.task('html', ['clean'], function () {

return gulp.src(paths.html)

.pipe(gulp.dest(dst_dir));

});

// 处理 CSS

gulp.task('css', ['clean'], function () {

return gulp.src(paths.css)

.pipe(cleanCSS()) // 压缩 CSS

.pipe(gulp.dest(dst_dir));

});

// 处理 JavaScript：直接拷贝到输出文件夹

gulp.task('js', ['clean'], function () {

return gulp.src(paths.js)

.pipe(gulp.dest(dst_dir));

});

// 处理图片

gulp.task('images', ['clean'], function () {

return gulp.src(paths.images)

.pipe(imagemin({optimizationLevel: 5})) // 压缩图片

.pipe(gulp.dest(dst_dir));

});

gulp.task('default', [ 'html', 'css', 'js', 'images']);

这里不对代码进行细致解释，有疑问可以参看奇迹 Blog 中 gulp 相关文章。

完成 gulpfile.js 编写后，在命令行中键入 gulp，即可在输出目录中生成已压缩完成的代码，算是完成了项目中 gulp 的基本搭建。

gulp

gulp

图片缓存

在使用 gulp 压缩几次过后，出现了新问题。代码压缩需要的时间很短，但图片压缩用时很长。每次使用 gulp，都会重新把所有图片压缩一遍，图片越来越多，需要的时间越来越长，而且绝大部分工作都是重复的。于是又开始了新一轮的查阅，最后找到了这个：

gulp-cache：在压缩图片处理中使用，当图片发生变化时才进行压缩。

只需要对 gulpfile.js 进行小小的修改：

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

gulp.task('images', ['clean'], function () {
  return gulp.src(paths.images)
    .pipe(cache(imagemin({optimizationLevel: 5})))  // 这里使用 cache
    .pipe(gulp.dest(dst_dir));
});

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

gulp.task('images', ['clean'], function () {

return gulp.src(paths.images)

.pipe(cache(imagemin({optimizationLevel: 5}))) // 这里使用 cache

.pipe(gulp.dest(dst_dir));

});

这样已经存在的图片不会再被反复压缩，大大缩短 gulp 执行时间。

JSHint

随着项目的进行，我发现 JSHint 是个不错的工具，能对 JavaScript 代码进行一些检查，提高代码质量。最开始，我把 JSHint 放在 ‘js’ 任务中，随后意识到，一般只有代码基本完成后，我才需要压缩它，而在编写代码过程中，JSHint 就能发挥作用。于是添加了一个 task：

var hint = require('gulp-jshint');

gulp.task('hint', function () {
  return gulp.src(paths.js)
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

var hint = require('gulp-jshint');

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

return gulp.src(paths.js)

.pipe(jshint())

.pipe(jshint.reporter('default'));

});

平时在命令行中，使用以下命令来进行代码检查：

gulp hint

gulp hint

每次自己手动敲命令检查代码实在有些傻，于是引入了插件 gulp-watch：

gulp-watch：监控文件变化。

将 ‘hint’ 任务改为：

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

gulp.task('hint', function () {
  return gulp.src(paths.js)
    .pipe(watch(paths.js))
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

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

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

return gulp.src(paths.js)

.pipe(watch(paths.js))

.pipe(jshint())

.pipe(jshint.reporter('default'));

});

当执行 gulp hint 后，命令行将挂起一个服务，每当 JavaScript 文件的修改被保存，就能自动检查代码。

浏览器刷新 with gulp

现在，项目中挂着两个服务，一个是 lite-server，用来刷新浏览器，另一个是 gulp hint，用来检查 JavaScript 代码。是时候放弃 lite-server，直接用 gulp 来提供浏览器刷新功能，将两个服务合一。

var browserSync = require('browser-sync');

gulp.task('browser-sync', function () {
  browserSync.init({
    server: {
      baseDir: src_dir
    }
  });

  gulp.watch(paths.js, ['lint']);

  gulp.watch(src_dir + '/**/*', function(){
    browserSync.reload();
  });
});

var browserSync = require('browser-sync');

gulp.task('browser-sync', function () {

browserSync.init({

server: {

baseDir: src_dir

}

});

gulp.watch(paths.js, ['lint']);

gulp.watch(src_dir + '/**/*', function(){

browserSync.reload();

});

浏览器自动刷新

开始使用 gulp

图片缓存

JSHint

浏览器刷新 with gulp

发表评论 取消回复

发表评论取消回复