Gulp安装及配合组件构建前端开发一体化
原文:http://www.dbpoo.com/getting-started-with-gulp/
所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484)。
Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。
Gulp安装
全局安装Gulpjs
局部安装Gulpjs
全局安装
1. 将安装包放在 /usr/local 下
2. 可以直接在命令行里使用
本地安装
1. 将安装包放在 ./node_modules 下(运行npm时所在的目录)
2. 可以通过 require() 来引入本地安装的包
选择Gulp组件
前端项目需要的功能:
1、图片(压缩图片支持jpg、png、gif)
2、样式 (支持sass 同时支持合并、压缩、重命名)
3、javascript (检查、合并、压缩、重命名)
4、html (压缩)
5、客户端同步刷新显示修改
6、构建项目前清除发布环境下的文件(保持发布环境的清洁)
通过gulp plugins,寻找对于的gulp组件
gulp-imagemin: 压缩图片
gulp-ruby-sass: 支持sass
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 压缩html
gulp-clean: 清空文件夹
gulp-livereload: 服务器控制客户端同步刷新(需配合chrome插件LiveReload及tiny-lr)
安装Gulp组件
安装组件项目目录,通过cd project 进入目录,执行下边的npm安装组件。
项目目录结构
project(项目名称)
|–.git 通过git管理项目会生成这个文件夹
|–node_modules 组件目录
|–dist 发布环境
|–css 样式文件(style.css style.min.css)
|–images 图片文件(压缩图片)
|–js js文件(main.js main.min.js)
|–index.html 静态文件(压缩html)
|–src 生产环境
|–sass sass文件
|–images 图片文件
|–js js文件
|–index.html 静态文件
|–.jshintrc jshint配置文件
|–gulpfile.js gulp任务文件
gulp基础语法
gulp通过gulpfile文件来完成相关任务,因此项目中必须包含gulpfile.js
gulp有五个方法:src、dest、task、run、watch
src和dest:指定源文件和处理后文件的路径
watch:用来监听文件的变化
task:指定任务
run:执行任务
编写gulp任务
* 组件安装
* npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
*/
// 引入 gulp及组件
var gulp = require('gulp'), //基础库
imagemin = require('gulp-imagemin'), //图片压缩
sass = require('gulp-ruby-sass'), //sass
minifycss = require('gulp-minify-css'), //css压缩
jshint = require('gulp-jshint'), //js检查
uglify = require('gulp-uglify'), //js压缩
rename = require('gulp-rename'), //重命名
concat = require('gulp-concat'), //合并文件
clean = require('gulp-clean'), //清空文件夹
tinylr = require('tiny-lr'), //livereload
server = tinylr(),
port = 35729,
livereload = require('gulp-livereload'); //livereload
// HTML处理
gulp.task('html', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist/';
gulp.src(htmlSrc)
.pipe(livereload(server))
.pipe(gulp.dest(htmlDst))
});
// 样式处理
gulp.task('css', function () {
var cssSrc = './src/scss/*.scss',
cssDst = './dist/css';
gulp.src(cssSrc)
.pipe(sass({ style: 'expanded'}))
.pipe(gulp.dest(cssDst))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(livereload(server))
.pipe(gulp.dest(cssDst));
});
// 图片处理
gulp.task('images', function(){
var imgSrc = './src/images/**/*',
imgDst = './dist/images';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(livereload(server))
.pipe(gulp.dest(imgDst));
})
// js处理
gulp.task('js', function () {
var jsSrc = './src/js/*.js',
jsDst ='./dist/js';
gulp.src(jsSrc)
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest(jsDst))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(livereload(server))
.pipe(gulp.dest(jsDst));
});
// 清空图片、样式、js
gulp.task('clean', function() {
gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
.pipe(clean());
});
// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
gulp.start('html','css','images','js');
});
// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){
server.listen(port, function(err){
if (err) {
return console.log(err);
}
// 监听html
gulp.watch('./src/*.html', function(event){
gulp.run('html');
})
// 监听css
gulp.watch('./src/scss/*.scss', function(){
gulp.run('css');
});
// 监听images
gulp.watch('./src/images/**/*', function(){
gulp.run('images');
});
// 监听js
gulp.watch('./src/js/*.js', function(){
gulp.run('js');
});
});
});
LiveReload配置
1、安装Chrome LiveReload
2、通过npm安装http-server,快速建立http服务
3、通过cd找到发布环境目录dist
4、运行http-server,默认端口是8080
5、访问路径localhost:8080
6、再打开一个cmd,通过cd找到项目路径执行gulp,清空发布环境并初始化
7、执行监控 gulp
8、点击chrome上的LiveReload插件,空心变成实心即关联上,你可以修改css、js、html即时会显示到页面中。
视频教材youtube(需要FQ):http://www.youtube.com/watch?v=OKVE6wE9CW4
项目git
配置好的项目已经放到github上。
下载地址:https://github.com/dbpoo/gulp
git clone地址:git@github.com:dbpoo/gulp.git
Gulp安装及配合组件构建前端开发一体化的更多相关文章
- Gulp安装及配合组件构建前端开发一体化(转)
Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...
- Gulp自动构建前端开发一体化
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自 ...
- gulp构建前端开发环境
1.gulp环境的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 2.建立文件夹 mkdir item 3.初始化项目: npm ...
- Vue.js-组件化前端开发新思路
Vue.js-组件化前端开发新思路 12017.04.14 18:31:25字数 6228阅读 5632 本文章是我最近在公司的一场内部分享的内容.我有个习惯就是每次分享都会先将要分享的内容写成文章. ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- Gulp.js----比Grunt更易用的前端构建工具
Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 prese ...
- Gulp构建前端自动化工作流之:常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
- gulp 配置自动化前端开发
有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:“grunt廉颇老矣 ...
随机推荐
- 深入理解JavaScript系列:各种上下文中的this
开头闲扯几句.上篇写对象原型的文章获得了1K多的阅读和几条评论,心里还是蛮欣喜的.那种写出来然后有人跟你讨论的感觉很不错. 公告里已经有写,自己开这个博客以及为什么要写文章的原因就是为了能把自己所思所 ...
- D3的参考样例
官网进去就可以看到很多样例了.但是最喜欢的是mbostock的http://bl.ocks.org 然后其它的也有一些: 看上去很酷--http://www.visualcinnamon.com/po ...
- 极路由访问Apple Store可以浏览但是不能下载的解决方案
最近在家里上网突然发现Apple Store不能更新了.重启路由器发现最开始一会是能下载更新的,但是过了一会就完全不能下载更新了.很是奇怪,今天特意分析了一下这个问题. 首先,抓包确定Apple St ...
- foreach为什么要实现IEnumerable接口而不是直接用IEnumerator接口
在.Net中,要想被foreach遍历,那么目标对象要实现IEnumerable或IEnumerable<T>接口,这个接口有一个方法,GetEnumerator(),返回一个IEnume ...
- mtk开发
mtk套接字所有的声明放在soc_api.h 条件编译命令最常见的形式为: ? 1 2 3 4 5 #ifdef标识符 //程序段1 #else //程序段2 #endif 它的作用是:当标识符已经被 ...
- 【JavaScript忍者秘籍】
- 0x00到0xFF二进制数值中1的的个数
似乎有点无聊耶~~~~~(>_<)~~~~ #include <stdio.h> , , , , , , , , , , , , , , , }; ] = { , , , , ...
- 关于URI URL URN
刚琢磨.整理了关于escape.encodeURIComponent.encodeURI的知识.突然又对URI有点模糊了,遂整理了以下资源 : 资源一: URL,URI 和URN 的举例理解 资源二: ...
- Json与javaBean之间的转换工具类
/** * Json与javaBean之间的转换工具类 * * {@code 现使用json-lib组件实现 * 需要 * json-lib-2.4-jdk15.jar * ...
- ecshop后台分页浅析
既然是分页,道理都是一样的,不过ecshop前台分页的函数和后台分页的函数不同,后台分页函数为page_and_size(),在admin/includes/lib_main.php里.都是用aj ...