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. CWebBrowser2获取html的内容

    m_web为浏览器控件的变量名 LPDISPATCH p=m_web.GetDocument(); CComQIPtr<IHTMLDocument2,&IID_IHTMLDocument ...

  2. hihocode 1077 : RMQ问题再临-线段树

    #1077 : RMQ问题再临-线段树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到:小Hi给小Ho出了这样一道问题:假设整个货架上从左到右摆放了N种商品,并 ...

  3. easyui combobox onSelect事件

    easyui combobox 没有onchange事件,只有onSelect事件 1 $(function () { $('#Select6').combobox({ onSelect: funct ...

  4. 学习python之练习(三)

    python排序算法 1.冒泡排序: import math def BubbleSort(list): lengthOfList = len(list) for i in range(0,lengt ...

  5. (Python )模块、包

    本节开始学习模块的相关知识,主要包括模块的编译,模块的搜索路径.包等知识 1.模块 如果我们直接在解释器中编写python,当我们关掉解释器后,再进去.我们之前编写的代码都丢失了.因此,我们需要将我们 ...

  6. POJ2396_Budget

    题意为给一个矩形数字阵,给出一些限制条件,包括每行和每列的和,还有一些位置的数值范围,求出满足情况的一个. 首先建图,源点->行和->列和->汇点,显然,行和列之间的边为那个数字的大 ...

  7. PopupWindow

    以前对于提示类型UI用到了PopupWindow 通过构造函数或者setContentView(View contentView)可以设置其显示内容: 显示时showAtLocation(View p ...

  8. Apache禁止目录访问的方法

    在学习ThinkPHP(3.2.3)的时候,公共文件夹.应用目录文件夹等都自带或者自动生成index.html的安全文件.但是ThinkPHP文件夹(核心包)却没有这样的设置.那么ThinkPHP核心 ...

  9. 斯坦福第十三课:聚类(Clustering)

    13.1  无监督学习:简介 13.2 K-均值算法 13.3  优化目标 13.4  随机初始化 13.5  选择聚类数 13.1  无监督学习:简介 在这个视频中,我将开始介绍聚类算法.这将是一个 ...

  10. 转 父表字表统计查询的sql练习

    create table father(        f_id number(2) primary key,        f_name varchar2(10) ); create table s ...