前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具。
一、环境配置
gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好
然后给系统配上gulp环境
npm install -g gulp
再到某一工程目录下
跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了)
然后就类似的先装上gulp
npm install gulp --save-dev
最基本的使用方式是这样:(使用jshint插件校验js代码)
var jshint = require('gulp-jshint'); gulp.task('myTask',function(){
return gulp.src('main.js')
.pipe(jshint({undef: true}));
});
然后命令行使用:gulp myTask 即可运行此程序。
二、基本用法--插件使用
gulp所支持的插件也是很多的,使用方式跟基本的nodejs差不多。
下面统一介绍几个常见的 插件,更详细用法可以到对应官方站点查看API
- sass的编译(gulp-ruby-sass)
- 自动添加css前缀(gulp-autoprefixer)
- 压缩css(gulp-minify-css)
- js代码校验(gulp-jshint)
- 合并js文件(gulp-concat)
- 压缩js代码(gulp-uglify)
- 压缩图片(gulp-imagemin)
- 重命名(gulp-rename)
- 自动刷新页面(gulp-livereload)
- 图片缓存,只有图片替换了才压缩(gulp-cache)
- 更改提醒(gulp-notify)
- 清除文件(del)
使用它们,就要先install,可以直接在package.json中直接配置devDependencies依赖项,然后再统一 npm install
或者一个一个地安装,依赖项会自动建立。比如安装压缩css的依赖包:
npm install gulp-minify-css --save-dev
这里直接把所以依赖全支持上,因为都要用到。
然后进入 gulpfile.js文件,先直接require
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.task('styles',function(){
return sass('static/style/test.scss',{style: 'expanded'})
.pipe(autoprefixer('last 2 version','safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('static/style'))
.pipe(rename({suffix:'.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./build/static'))
.pipe(notify({message: 'style done!'})); });
解释一下,其实就是 将sass文件编译成css,以流的形式pipe结果,再加css前缀,修改后缀为.min.css,并作资源压缩,最后成功后返回done的消息
命令行键入 gulp styles 成功的话看到done信息,相应css文件也顺利产生。
原本打算直接用src的形式,没料到会出错,难道是 gulp-ruby-sass 不支持这种写法?
再试一下 js的
gulp.task('scripts',function(){
return gulp.src('./static/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('./static/script'))
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('./build/static'))
.pipe(notify({message: 'script done!'})); });
当然,现在有两个任务了,直接gulp [task]未免太麻烦
命令行 gulp默认执行的是default的任务
所以可以这么玩:
gulp.task('default',['watch'],function(){
gulp.start('styles','scripts');
});
解释一下,第一个参数是任务1(不一定非得default),第二个参数也是任务(这个任务可以为空,代表着任务一依赖它(们),任务一执行完才轮到它,当然了,其实我现在这个顺序好像有点..)
这个watch是一个监听的任务,下头会讲到
然后gulp.start 再执行上述的那两个任务。
这样一来,命令行直接gulp就能执行这仨任务了,还能实时监听改变哦~
这个watch的监听任务:
gulp.task('watch',function(){
gulp.watch('./static/style/test.scss',['styles']);
livereload.listen();
gulp.watch('./build/static/test.min.css').on('change',livereload.changed);
});
解析:第二行是指监听那个scss文件,如果有改动就执行styles的那个任务
第三行是开启浏览器端的监听模式
第四行是监听某个css文件,比如我html文件引用了这个文件,它变化时浏览器就会自动刷新。
ps: 不过默认情况下可能还是无法监听的,有两种方法:
装上 liveReload 插件(比如chrome上)
给html代码添加上:参考
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
如果是远程机子,非本地的,例如: 参考
<script src="http://192.168.0.1:35729/livereload.js?snipver=1"></script>
ok 整个运行一下吧!
shenmegui .. console.log都识别不了,不管了..忽略
不过为什么jshint出错了还会继续下面的操作呢?看了还得截断一下才行
还有图片的压缩imagemin插件
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
以及clean插件的使用等:
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
当然,gulp任务的执行是异步的,也就是说,任务之间的执行没有先后之分,若想保证执行顺序
只好定义依赖关系(如上述参数二的依赖)
或者使用Promise对象实现,回调函数的使用,参考
前端自动化构建工具——gulp的更多相关文章
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- 前端自动化构建工具--Gulp&&Webpack
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
- 前端自动化构建工具——gulp环境搭建教程
gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...
- 前端自动化构建工具-gulp
gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- 前端自动化构建工具gulp使用
1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev ...
- 前端自动化构建工具gulp
1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次 ...
随机推荐
- socket通信简介
转:http://blog.csdn.net/xiaoweige207/article/details/6211577 “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的 ...
- 1.6.4 Uploading Structured Data Store Data with the Data Import Handler
1.使用DIH上传结构化数据 许多搜索应用索引结构化数据,如关系型数据库.DIH提供了一个这样的存储并索引结构化数据的机制.除了关系型数据库,solr可以索引来自HTTP的内容,基于数据源如RSS和A ...
- 跨平台轻量级redis、ssdb代理服务器(C++ 11编写)
dbproxy 是我业余采用C++11编写的跨平台代理服务器(并使用lua和自己的网络库),以扩展系统负载,同时使用多个后端数据库,后端数据库支持redis和ssdb. 需要由用户自己编写lua脚本控 ...
- 40个GitHub上最受欢迎的iOS开源项目
40个GitHub上最受欢迎的iOS开源项目(一) http://www.weste.net/2013/8-1/92975.html 40个GitHub上最受欢迎的iOS开源项目(二) http:// ...
- emWin使用外部SRAM的方法
我用的是stm32,加了1MB的外部SRAM,在使用emWin的时候,将一部分内存分配给emWin使用.其实方法很简单,传入SRAM数据总线地址即可,数据位宽我采用16bit,因为使用的SRAM是16 ...
- DML 数据操控语言
一.DML数据操作语言 (DQL select ) 主要用于检索.插入和修改数据库信息.它是最常用的SQL命令,如INSERT(插入).UPDATE(更新).SELECT(选择).DELETE(删 ...
- CentOS7,Firewalld防火墙使用方法
查看防火墙状态 systemctl status firewalld.service 启动firewall systemctl stop firewalld.service 停止firewall sy ...
- a different object with the same identifier value was already associated withthe session异常解决方案
异常信息: org.hibernate.NonUniqueObjectException: a different object with the same identifier value was ...
- Macbook之安装opencv
link:http://www.mobileway.net/2015/02/14/install-opencv-for-python-on-mac-os-x/
- 数理方程:Laplace变换 & 留数(更新中)
更新:25 APR 2016 Laplace变换 设函数\(f(t)\)在\(t>0\)时有定义,积分 \(F(s)=\int_0^{+\infty}f(t)e^{-st}dt \qquad ( ...