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

此时在命令行输入:

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/

gulp学习笔记3的更多相关文章

  1. gulp学习笔记4

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...

  2. gulp学习笔记1

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...

  3. gulp学习笔记2

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...

  4. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  5. gulp 学习笔记

    以这次学习gulp为契机来同时了解和学习node相关的知识和概念,比如 npm,package.json等,为以后学习node打好基础. 目录   npm     查看模块     安装模块      ...

  6. gulp学习笔记——最好的学习文档是官网

    官网:http://www.gulpjs.com.cn/docs/api/ 当然还有一个博客写的也很好,当我看不下去官网的时候,这个帮助了我很多,明了易懂:http://www.ydcss.com/a ...

  7. gulp学习笔记

    第一步:安装Node 首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,下载并安装No ...

  8. gulp 学习笔记 (初识)

    根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...

  9. gulp学习笔记2-安装

    安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1.去nodejs官网安装nodejs 2. ...

随机推荐

  1. socket方法

    // 创建一个Socket实例var socket = new WebSocket('ws://192.168.2.72:8430'); // 打开Socket socket.onopen = fun ...

  2. Linux2

    linux开源软件 :apache软件 nginx支持更高的并发访问 MySQL PHP samba mongoDB python 应用领域: 一:服务器  二:嵌入式

  3. 自定义安装php开发环境(1)--apache和php整合

    第一步:安装apache 第二步:下载php核心包php-5.3.3-Win32-VC6-x86.zip.并放入开发环境文件夹C:/phpenv/文件夹下 第三步: 将apache 和php 整合 也 ...

  4. acm入门编成题

    http://wenku.baidu.com/view/c8f2f64acf84b9d528ea7aee.html

  5. QEMU/KVM功能测试

    最近在对QEMU/KVM在HP服务器进行功能测试,项目刚刚启动,遇到不少问题,从Git上拿到最新的source build进行测试,在RHEL7.0a3 + Kernel version3.10 + ...

  6. getline函数的用法

    函数声明 bool getline(istream &in, string &s) 功能说明: 从输入流读入一行到变量string s,及时是空格也可以读入. –直到出现以下情况为止: ...

  7. C++矢量图形库系列(1)——矢量图形库乱谈(转)

    转自:http://blog.sina.com.cn/s/blog_4265e1760100lg03.html 本系列篇章的主要内容是讲解矢量图形库的编译.开发和使用.并不对他们周边的内容做过多的描述 ...

  8. Android 如何制造低内存环境

    我们在复现问题的时候有时需要低内存的环境,此时我们可以在有root的手机中,往 /mnt/obb 目录下 push 文件,直到满足需要. 原理:/mnt/obb目录下挂载的是tmpfs文件系统,该文件 ...

  9. Java写的爬虫的基本程序

    这是一个web搜索的基本程序,从命令行输入搜索条件(起始的URL.处理url的最大数.要搜索的字符串),它就会逐个对Internet上的URL进行实时搜索,查找并输出匹配搜索条件的页面. 这个程序的原 ...

  10. VC中LINK 2001 和 LINK 2009 的错误的解决

    最近将两个开源C++项目编译成windows版本的时候遇到很多问题,关键是两个项目经过同事的修改之后,一个项目引用了另一个项目,两个项目的头文件中都有一些跨平台的关于数据类型,以及一些通用函数的定义, ...