Gulp是一款前端自动化的工具,如果能熟练使用Gulp来进行开发一定可以节省很多的时间,也可以快速的提高工作效率。

在使用Gulp之前就是要配置好Gulp安装的环境,这是我们能使用Gulp快速开发的第一步。

安装

~~~~~~~~~~~~~~

D1 NodeJS安装

  Gulp是基于NodeJS运行的,所以第一步就是要先安装NodeJS, https://nodejs.org/en/

  安装好Node之后,在Node的Command里面安装全局环境以及本地环境

# 安装全局环境
npm install gulp -g
#安装本地环境
npm install gulp --save-dev

  安装成功之后就可以进入下一步了,//gulp -v可以查看安装成功后的版本号。

D2 Ruby安装

  Ruby安装地址:http://rubyinstaller.org/downloads

  在Gulp中,有一个重要的编译工具就是sass, 利用sass可以快速的编译我们的css代码。因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。

  在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境。

   

D2 SASS安装

  安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

  

  然后直接在命令行中输入

gem install sass

  

  这个方法可以最快速便捷的安装SASS, 但是由于可能被墙,不一定能安装成功,所以我们还可以用一种更加稳妥的方式来安装SASS.

  淘宝RubyGems镜像安装 sass

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES *** https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

SASS安装成功之后就可以开始使用Gulp了,  以下会介绍一下Gulp的配置以及方法。

配置

~~~~~~~~~~~~~

D1 Gulp插件安装

npm install browser-sync gulp-compass gulp-sass gulp-rename gulp-jshint gulp-uglify gulp-concat gulp-imagemin gulp-cache gulp-connect gulp-minify-css gulp-sourcemaps gulp-notify gulp-livereload gulp-clean gulp-load-plugins gulp-rev-append gulp-make-css-url-version --save-dev

  插件可根据自己的需求安装,分别代表:

  1、编译Sass,生成雪碧图(gulp-compass);

  2、编译sass(gulp-sass);

  3、sass浏览器地图(gulp-sourcemaps);

  4、重命名文件(gulp-rename);

  5、JS语法检测(gulp-jshint);

  6、JS丑化(gulp-uglify);

  7、JS文件合并(gulp-concat);

  8、图片压缩(gulp-imagemin);

  9、缓存通知(gulp-cache);

  10、web服务(gulp-connect);

  11、压缩CSS(gulp-minify-css);

  12、css文件引用URL图片加版本号(gulp-make-css-url-version);

  13、清空文件夹(gulp-clean);

  14、更新通知(gulp-notify);

  15、html文件引用加版本号(gulp-rev-append);

  16、web服务浏览器同步浏览(browser-sync);   // 推荐使用这个作为web服务

  可以把之前配置好的文件整个复制到新的项目下也是可以的,节省了配置安装的时间

D2  创建配置文件gulpfile.js

var gulp = require('gulp'),             
compass = require('gulp-compass'), // compass编译Sass, 生成雪碧图
sass = require('gulp-sass'), // sass编译
sourcemaps = require('gulp-sourcemaps'), // sass地图
rename = require('gulp-rename'), // 重命名文件
jshint = require('gulp-jshint'), // JS语法检测
uglify = require('gulp-uglify'), // JS丑化
concat = require('gulp-concat'), // JS拼接
imagemin = require('gulp-imagemin'), // 图片压缩
cache = require('gulp-cache'), // 缓存通知
connect = require('gulp-connect'), // web服务
minifycss = require('gulp-minify-css'), // 压缩CSS
cssver = require('gulp-make-css-url-version'), // css文件引用URL加版本号
clean = require('gulp-clean'), // 清空文件夹
notify = require('gulp-notify'), // 更新通知
rev = require('gulp-rev-append'), // html添加版本号
browserSync = require('browser-sync'), // 浏览器同步
reload = browserSync.reload; // 自动刷新

D2  构建gulp执行任务

// 定义web服务模块,增加浏览器同步浏览
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: '.'
}
});
}); // 创建Compass任务,编译Sass生成雪碧图
gulp.task('compass', function() {
gulp.src(path.dev.sass+'/*.scss')
.pipe(compass({
config_file: './config.rb', // 配置文件
css: path.dev.css, // 编译路径
sass: path.dev.sass   // sass路径
//image: path.dev.image // 图片路径,用于生成雪碧图
}))
.pipe(cssver()) // CSS文件引用URl加版本号
.pipe(minifycss()) // 压缩CSS
.pipe(gulp.dest(path.dist.css)) // 发布到线上版本
.pipe(reload({stream: true}));
}); // 压缩HTML
gulp.task('html', function() {
gulp.src(path.dev.html+"/*.html")
.pipe(rev()) // html 引用文件添加版本号
.pipe(gulp.dest(path.dist.html))
.pipe(reload({stream: true}));
}); //检查脚本
gulp.task('lint', function() {
gulp.src(path.dev.js+'/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});// 图片压缩
gulp.task('image', function() {
gulp.src(path.dev.image+'/*.*')
.pipe(cache(imagemin()))
.pipe(reload({stream: true}))
.pipe(gulp.dest(path.dist.image));
//.pipe(notify({ message: '图片压缩'}));
}); // 合并压缩JS文件
gulp.task('script', function() {
gulp.src(path.dev.js+'/*.js')
//.pipe(concat('all.js')) // 合并
//.pipe(gulp.dest(path.dist.js))
//.pipe(rename('all.min.js')) // 重命名
.pipe(uglify()) // 压缩
.pipe(gulp.dest(path.dist.js))
//.pipe(notify({ message: 'JS合并压缩' }))
.pipe(reload({stream: true}));
}); // 清空文件夹
gulp.task('clean', function() {
gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false})
.pipe(clean());
}); // 默认任务
gulp.task("default", function() {
gulp.run('browser-sync', 'lint', 'compass', 'script', 'image'); // 检测文件发送变化 - 分开监听为了执行对应的命令
gulp.watch(path.dev.html+'/*.*', ['html']);
gulp.watch(path.dev.sass+'/*.scss', ['compass']);
gulp.watch(path.dev.image+'/**', ['image']);
gulp.watch(path.dev.js+'/*.js', ['lint', 'script']); });

  

  配置浏览器自动刷新问题

  使用gulp的browser-sync插件可以实现浏览器自动刷新,同步浏览的功能,创建实现自动刷新,需要启动自动刷新的插件,在引入插件处

var browserSync = require('browser-sync'),        // 浏览器同步
reload = browserSync.reload;  // 自动刷新

  之后,创建browser-sync的task任务,并在gulp的启用。

gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: '.'
}
});
});

  baseDir 为默认的服务访问路径,默认访问为 http://localhost:3000, 配置信息为 http://localhost:3001

  然后在发生变化要刷新的任务处,添加如下语句即可。详情参考: BrowserSync + Gulp.js

.pipe(reload({stream: true}));

  

  gulp-compass 合并雪碧图使用的 config.rb 配置文件,内容如下:

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "./dev/css"
sass_dir = "./dev/sass"
images_dir = "./dev/images"
javascripts_dir = "./dev/js" # You can select your preferred output style here (can be overridden via the command line):
# 合并雪碧图的方式
# output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment:
# 相对路径
relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false # If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

  

  最后只要在cmd当前目录下输入gulp指令就会开始default任务了。

前端工具之Gulp的更多相关文章

  1. web 前端工具: Gulp 使用教程

    1 1 1 Gulp 使用教程: 1 1 1 1 1 1 1 1 ERROR: ./app.js 当前目录路径: ./ 当前目录路径: ./ 1 1 1 1 1 参考资源: http://webpac ...

  2. 前端工具gulp

    最近在写一个新的项目,用到了新框架,主要是:react+webpack.里面还用到了一个前端工具——gulp. gulp在项目里的作用是打包静态资源.编译less,压缩css等.js并不在处理之列(不 ...

  3. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  4. 前端构建大法 Gulp 系列 (一):为什么需要前端构建

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  5. 前端构建之gulp与常用插件

    gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具grunt相比,有什么优势呢? 易于使用,代码优于配置 高效,不会产生过多的中间文件,减少I/O压力 易于学习 ...

  6. 前端工具之WebPack解密之背景

    请注意,这是一篇站在完全新手的角度上来写的文章.可能你是一个后端人员想了解前端工具的使用和概念;也可能你是一个前端小菜(还在DIV+CSS的世界里挣扎着).本文比较适合那些以前完全没有接触过WebPa ...

  7. 前端构建之gulp与常用插件(转载)

    原博主:幻天芒 原文地址:http://www.cnblogs.com/humin/p/4337442.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建 ...

  8. 前端自动化之gulp

    前端自动化之gulp 前题:1.安装好nodejs环境,或者nvm 2.安装npm包管理工具 简介: 可以自动的将开发阶段的代码进行压缩.合并.编译.加密等处理,生成项目提交的代码. 使用: gulp ...

  9. 前端构建大法 Gulp 系列 (四):gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...

随机推荐

  1. java中执行系统命令

    java程序中执行系统命令猛击下面的链接看看你就知道怎么用了 http://blog.csdn.net/a19881029/article/details/8063758 http://wuhongy ...

  2. 关于安装ruby brew 提示失败

    Error running 'requirements_osx_brew_update_system ruby-1.9.3-p551', showing last 15 lines of /Users ...

  3. Catalan数应用整理

    应用一: codevs 3112 二叉树计数  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 一个有n个结点的二叉树总共有 ...

  4. python基础之dict、set及字符

    python基础之dict.set及字符串处理 本节内容 字典介绍及内置方法 集合介绍 字符串处理 1.字典介绍及内置方法 字典是python中唯一的映射类型,采用键值对(key-value)的形式存 ...

  5. ThinkPHP常用查询

    1.常规 $map2['state'] = 1; $User->where ( $map2 )->find(); 2. OR 查询 $where['name'] = array('neq' ...

  6. nodeJS基础08:读取图片

    1.读取图片 //server.js var http = require("http"); var readImage = require("./readImage&q ...

  7. js的this和面向对象编程

    很奇怪的是很多书或资料没有把这个事情讲清楚. 关键就是在于没有一个整体的思维技术模式,问题被隔离了所以反而不容易理解. 我们先看this,这是js的关键字,指示函数的上下文对象. 这里问题就来了,比如 ...

  8. 浅谈微信小程序

    在如火如荼的互联网技术发展中,各种各样的框架出现,当下最受关注的应该就是微信小程序了.从新闻论坛乃至qq群.微信群,很多很多从事IT工作的朋友喜欢讨论研究这个小程序.带着好奇心,我也参与其中. 第一步 ...

  9. Curl扩展开启失败解决方案

    1.php.ini 开启curl扩展 2.设置有时候开启之后,curl还是不能将php目录下的libssh2.dll复制到apache/bin下.(基本上可以成功) 3. 如果没有开启成功,将php安 ...

  10. Zabbix监控disk performance

    概述 zabbix获取/sys里面的磁盘信息并分析来监控disk performance sysfs是Linux内核中设计较新的一种虚拟的基于内存的文件系统,它的作用与 proc 有些类似(默认挂载在 ...