gulp学习笔记3

gulp系列学习笔记：

1、编译sass

Sass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发，变得简单和可维护。

安装相应的模块：

npm install gulp-ruby-sass

在 gulpfile.js 文件编写如下代码：

/ 获取 gulp
var gulp = require('gulp')
// 获取 gulp-ruby-sass 模块
var sass = require('gulp-ruby-sass')
 
// 编译sass
// 在命令行输入 gulp sass 启动此任务
gulp.task('sass', function() {
    return sass('sass/')
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('dist/css'))
});

此时在命令行输入：

gulp sass

将sass文件夹下的.sass文件编译放到dist/css文件夹下。

2、检查js代码

JSHint（http://www.jshint.com/）是一个JavaScript语法和风格检查工具，你可以用它来提醒代码风格相关的问题。

同样的，我们也需要相应的代码：

npm install gulp-jshint --save-dev

然后我们在配置文件编写相对应的代码：

// 包含gulp
var gulp = require('gulp'); 
 
// 包含gulp-jshint插件
var jshint = require('gulp-jshint');
 
// jshint 任务建立
gulp.task('jshint', function() {
  gulp.src('./src/scripts/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

此时在命令行输入：

gulp jshint

你会看到如下输出：

[gulp] Using file D:\test\gulpfile.js
[gulp] Working directory changed to D:\test
[gulp] Running 'jshint'...
[gulp] Finished 'jshint' in 8.24 ms
D:\test\src\scripts\lib.js: line 2, col 20, Missing semicolon.
 
1 error

这里显示lib.js的文件有个错误。然后你照着修改就可以了。

3、压缩html

为了节省流量和提高页面的加载速度，同样的，我们可以对html也进行压缩。

安装相应的模块：

npm install gulp-minify-html --save-dev

在 gulpfile.js 文件编写如下代码：

// 包含插件
var minifyHTML = require('gulp-minify-html');
 
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
  gulp.src('./src/*.html')
    .pipe(minifyHTML())
    .pipe(gulp.dest('./dist'));
});

此时在命令行输入：

gulp htmlpage

将src文件夹下的.html文件编译放到dist文件夹下。

3、

4、只编译修改的文件

在前面的那些任务当中，当你只修改其中一个文件的话，其实所有的文件都会被重新编译一次。当编译的文件比较多的时候，所需要的时间就会大大增加。这时候，我们就要用到一个新的插件 gulp-changed.

安装插件：

npm install --save-dev gulp-changed

这里借用前面的图片压缩来说明，编写代码：

var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
 
// 压缩新图片
gulp.task('imagemin', function() {
  var imgSrc = './src/images/**/*',
      imgDst = './dist/images';
 
  gulp.src(imgSrc)
    //  发现有新图片
    .pipe(changed(imgDst))
    // 压缩
    .pipe(imagemin())
    // 保存
    .pipe(gulp.dest(imgDst));
});

此时在命令行输入：

gulp imagemin

将src/images文件夹下的图片压缩到dist/images文件夹下。

文章参考了以下资料：

1、gulp详细入门教程: http://www.ydcss.com/archives/18;

2、gulp API 文档: http://www.gulpjs.com.cn/docs/api/;

3、gulp 入门指南: https://github.com/huanshen/gulp-book;

4、An Introduction to Gulp.js: https://www.sitepoint.com/introduction-gulp-js/