gulp学习笔记3

gulp系列学习笔记：

1、gulp学习笔记1

2、gulp学习笔记2

3、gulp学习笔记3

4、gulp学习笔记4

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