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/