Gulp构建
整理自 https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/
已经有package.json
第一步:安装gulp到具体项目文件夹
npm install gulp --save-dev
第二步:安装gulp插件
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
第三步:加载插件 glupfile.js
着我们要创建一个gulpfile.js在根目录下,然后在里面加载插件:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
|
Gulp的插件和Grunt有些许不一样,Grunt插件是为了更好的完成一项任务。就像Grunt的imagemin
插件就利用了缓存来避免重复压缩,而Gulp要利用gulp-cache
来完成,当然啦,不仅限定于缓存图片。
第四步:建立任务 glupfile.js
编译sass、自动添加css前缀和压缩
首先我们编译sass,添加前缀,保存到我们指定的目录下面,还没结束,我们还要压缩,给文件添加.min
后缀再输出压缩文件到指定目录,最后提醒任务完成了:
1
2
3
4
5
6
7
8
9
10
|
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
|
让我解释一下:
1
|
gulp.task('styles', function () {...});
|
gulp.task
这个API用来创建任务,在命令行下可以输入$ gulp styles
来执行上面的任务。
1
|
return gulp.src('src/styles/main.scss')
|
gulp.src
这个API设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss, vender.scss]
,也可以是正则表达式/**/*.scss
。
1
|
.pipe(sass({ style: 'expanded' }))
|
我们使用.pipe()
这个API将需要处理的文件导向sass插件,那些插件的用法可以在github上找到,为了方便大家查找我已经在上面列出来了。
1
|
.pipe(gulp.dest('dist/assets/css'));
|
gulp.dest()
API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。
为了更好的了解Gulp API,强烈建议看一下Gulp API文档,其实Gulp API就这么几个,没什么好可怕的。
js代码校验、合并和压缩
希望大家已经知道如何去创建一个任务了,接下来我们完成scripts的校验、合并和压缩的任务吧:
1
2
3
4
5
6
7
8
9
10
11
|
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
|
需要提醒的是我们要设置JSHint的reporter方式,上面使用的是default默认的,了解更多点击这里。
压缩图片
1
2
3
4
5
6
|
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('dist/assets/img'))
.pipe(notify({ message: 'Images task complete' }));
});
|
这个任务使用imagemin
插件把所有在src/images/
目录以及其子目录下的所有图片(文件)进行压缩,我们可以进一步优化,利用缓存保存已经压缩过的图片,使用之前装过的gulp-cache插件,不过要修改一下上面的代码:
将这行代码:
1
|
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
|
修改成:
1
|
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
|
现在,只有新建或者修改过的图片才会被压缩了。
清除文件
在任务执行前,最好先清除之前生成的文件:
1
2
3
|
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
|
在这里没有必要使用Gulp插件了,可以使用NPM提供的插件。我们用一个回调函数(cb
)确保在退出前完成任务。
设置默认任务(default)
我们在命令行下输入$ gulp
执行的就是默认任务,现在我们为默认任务指定执行上面写好的三个任务:
1
2
3
|
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
|
在这个例子里面,clean任务执行完成了才会去运行其他的任务,在gulp.start()
里的任务执行的顺序是不确定的,所以将要在它们之前执行的任务写在数组里面。
监听文件
为了监听文件的是否修改以便执行相应的任务,我们需要创建一个新的任务,然后利用gulp.watch
API实现:
1
2
3
4
5
6
7
8
|
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
});
|
我们将不同类型的文件分开处理,执行对应的数组里的任务。现在我们可以在命令行输入$ gulp watch
执行监听任务,当.sass
、.js
和图片修改时将执行对应的任务。
自动刷新页面
Gulp也可以实现当文件修改时自动刷新页面,我们要修改watch
任务,配置LiveReload:
1
2
3
4
5
6
|
gulp.task('watch', function() {
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
|
要使这个能够工作,还需要在浏览器上安装LiveReload插件,除此之外还能这样做
package.json
如果你熟悉 npm 则可以利用 package.json
保存所有 npm install --save-dev gulp-xxx
模块依赖和模块版本。
在命令行输入
npm init
会依次要求补全项目信息,不清楚的可以直接回车跳过
name: (gulp-demo)
version: (1.0.0)
description:
entry point: (index.js)
test command:
...
...
Is this ok? (yes)
最终会在当前目录中创建 package.json
文件并生成类似如下代码:
{
"name": "gulp-demo",
"version": "0.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/nimojs/gulp-demo.git"
},
"keywords": [
"gulp",
],
"author": "nimojs <nimo.jser@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/nimojs/gulp-demo/issues"
},
"homepage": "https://github.com/nimojs/gulp-demo"
}
Gulp构建的更多相关文章
- 用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
- express+gulp构建项目(二)启动项目和主文件
这一次整理的内容是项目主文件和如何启动项目. 启动项目 通过nodejs官网的例子https://nodejs.org/docs/latest-v4.x/doc/api/synopsis.html我们 ...
- Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用
Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...
- Gulp构建前端自动化工作流之:常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
- 使用 gulp 构建一个项目
本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gul ...
- [翻译]在gulp构建工具中使用PostCSS
前言 PostCSS已经在一段时间内迅速普及,如果你还不知道PostCSS或还没有使用它,我建议你看一下之前的一篇介绍文章<PostCSS简介>,其中介绍了使用PostCSS的基本方法,包 ...
- gulp构建工具学习汇总
前端脚手架____gulp配置文件------- https://pan.baidu.com/s/1eSs7COy 1:有了package.json 直接 npm install自动下载相应的npm包 ...
- 使用gulp构建微信小程序工作流
前言 刚入门微信小程序的时候,一切都基于微信web开发者工具,没有使用其他框架,也没有工程化的概念.当时做的项目都比较简单,单单用微信web开发者工具倒也得心应手.学了些东西后,就按捺不住地想跳出原生 ...
- 使用gulp构建项目
gulp.js作为一个前端构建工具,类似于webpack.Grountjs.rollupjs,不过相对于其他几种打包工具,gulp的使用更轻量,配置更简单,打包速度更快,今天不说他们几个的区别,也不说 ...
随机推荐
- 写一些脚本的心得总结系列第4篇-------从数据库同步到redis
5.从数据库同步到redis的. redis把数据放内存里,读取都非常方便,也提供了远超memcache的丰富数据结构.下面我举2个例子,比如1)把数据从数据库写入到redis: <?php $ ...
- JavaScript中null和undefined
JavaScript的数据类型大体分为两类:原始类型和对象类型.其中,原始类型包括数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null(空)和undefined(未定义), ...
- C# 数据库连接测试以及备份
现在我们要做一个如图5.1的数据库连接配置,从界面上看有三个功能需要实现:从配置文件中读取数据库连接的相关属性.备份数据库.测试连接. 现在我们就一个一个开始讲解. 图5.1 1.从配置文件中读取数据 ...
- XAF-Domain Components 技术 使用接口来定义ORM业务对象
一.简介 Domain Component组件技术,以下简称DC,是扩展自XPO的, 官方不建议新手使用DC. 如果你用过EF,XPO及类似的ORM,这是很容易理解的,DC是基于XPO的,只是原业定义 ...
- MVC源码解析 - 进入CLR
这一篇是转载自汤姆大叔的一篇随笔. IIS 5 的 ASP.net 请求处理过程 IIS5核心特征是:IIS是允许在一个叫InetInfo.exe的进程上的,所以无论是aspx页面还是html页面都是 ...
- Linux中的info指令
Info 是什么?info是一种文档格式,也是阅读此格式文档的阅读器:我们常用它来查看Linux命令的info文档.它以主题的形式把几个命令组织在一起,以便于我们阅读:在主题内以node(节点)的形式 ...
- Docker环境下如何安装Zookeeper
第一步:首先下载Zookeeper的镜像文件: 从仓库中pull 这个zookeeper镜像:docker pull jplock/zookeeper:3.4.8 然后docker images查看该 ...
- gridcontrol如何根据值来动态设置某一行的颜色
应用场景:当我们使用devexpress gridcontrol wpf控件时.可要会要根据这一行要显示的值来设置相应的颜色 可以通过下面方法来实现 一.先定义一个style <local:Co ...
- Theos 工程make package时报错
错误: /Applications/Xcode.app/Contents/Developer/usr/bin/make package requires you to have a layout/ d ...
- centos7下引导win7
1.使用root身份(必须)打开 /boot/grub2/grub.cfg 2.找到 ### BEGIN /etc/grub.d/30_os-prober ### 在后面添加 menuentry &q ...