Gulp的安装配置过程和一些小坑
谈谈gulp。
项目尾声,老师叫我去熟悉一下grunt前端自动化工具,第一次知道这种东西,我就查各种资料啊,发现grunt已经‘过时’了,大家都用gulp和webpack。我当然选择了配置最简单的gulp=-=
gulp是基于Nodejs的自动任务运行器,基本流程就是先安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行gulp(webstorm神器更简单)。
安装nodejs就不说了,一步步默认,打开cmd控制台,直接查看node版本,检测是否安装成功
全局安装gulp,出现warn不要紧,等他慢慢转,表示正在联网下载...
npm install -g gulp
全局安装完成后,通过cmd进入项目目录创建package.json文件,这是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件:
直接在后面加上 -y 会自动生成,省去一步步的选择填空操作。
接着在cmd项目目录下开始本地安装gulp各种插件,在这里找你需要的插件。有四个是用得最多的,必备的
1、语法检查 (gulp-jshint
)
2、合并文件 (gulp-concat
)
3、压缩代码 (gulp-uglify
)
4、文件重命名 (gulp-rename
)
就拿gulp-jshint举例吧,在cmd项目目录下输入
npm install gulp-jshint --save-dev
--save-dev 是可以省掉你手动修改package.json文件的步骤,正常情况下得连同版本号手动将他们添加到模块配置文件package.json中的依赖里
安装配置完成,要开始写代码啦。
在项目目录下新建Gulpfile.js文件,gulp有五种方法:task
,run
,watch
,src
,和dest.
//引入组件
1 var gulp = require('gulp'); var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var clean = require('gulp-clean');
var minify_css = require('gulp-minify-css');
//创建任务
gulp.task('hint',function(){
return gulp.src(['a.js', 'b.js', 'c.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); gulp.task('script', function () {
return gulp.src(['a.js', 'b.js', 'c.js'])
.pipe(concat('ABC.js'))
.pipe(gulp.dest('application'))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('application'));
}); gulp.task('css1', function () {
return gulp.src('dist/css/d.css')
.pipe(minify_css())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('application'));
}); gulp.task('css2', function () {
return gulp.src(['dist/css/e.css', 'dist/css/f.css'])
.pipe(concat('EF.css'))
.pipe(gulp.dest('application'))
.pipe(minify_css())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('application'));
}); gulp.task('watch', function () {
gulp.watch(['a.js', 'b.js', 'c.js'], ['script']);
gulp.watch('dist/css/d.css', ['css1']);
gulp.watch(['dist/css/e.css', 'dist/css/f.css'], ['css2']);
}); gulp.task('clean', function () {
return gulp.src('application', {read: false})
.pipe(clean());
}); gulp.task('default', ['clean'], function () {
gulp.run('hint','script', 'css1', 'css2', 'watch');
});
代码很简单,也很容易理解,来谈谈我遇到的一点小小的坑。
代码敲完,需要回到命令行,运行gulp。直接输入gulp,就开始运行,期间会报一些error,不要紧张,指的是js文件里一些语法错误,无伤大雅,成功创建出压缩文件才是最终目的。
那么如果需要修改代码,必须一直把cmd控制台保持打开状态,否则无法执行watch操作。第一点坑,就是编辑器的自动保存功能,一行代码如果写的不顺,或是中途打岔,比如‘$scope.’,还没接着写完,编辑器自动保存的功能会使jshint检查出语法错误,导致gulp的停止运行。如果用的是webstrom编辑器的,可以不用每次打开命令行,右键选中gulpfile.js,show gulp tasks,再点击default即可。
操作过程中,我遇到的第二个坑就是clean插件的使用问题上。最开始我写的代码不是像上面那样,watch任务是直接在script,css任务最后执行,最后两块写的是
gulp.task('default', ['clean', 'less', 'images', 'js', 'watch']);
之后怎么都不能好好工作,原来,在default里面的任务是同步操作的!!是会出现边编译边删除的的情况的!!还是一步一步来,不要想着一步到位。先创建watch任务,再创建clean,最后default的时候,不要把clean写在run里面,配置一个异步就搞定了。
这是修改编辑器(webstrom)自动保存的:
好了,好了。
第一次写这玩意,很多地方都得自己再搞清楚一遍才敢往上写,对自己提升还是很有帮助的。
Gulp的安装配置过程和一些小坑的更多相关文章
- WAMP(Windows、Apache、MySQL、php)安装配置过程常见问题
WAMP(Windows.Apache.MySQL.php)安装配置过程 可以参考该网友的总结(总结的不错,鼓掌!!): http://www.cnblogs.com/pharen/archive/2 ...
- LAMP安装配置过程
Mysql ./configure --prefix=/usr/local/mysql (注意/configure前有“.”,是用来检测你的安装平台的目标特征的,prefix是安装路径) #make ...
- ESXi与物理交换机静态链路聚合配置过程中的小陷阱
作者:陆斌文章来自微信公众号:平台人生 内容简介:ESXi与物理交换机之间配置静态链路聚合时,因为静态链路聚合的特点,在进行down网卡和从虚拟交换机移除网卡的操作时,可能会无法完成故障流量切换,影响 ...
- Gentoo安装配置过程与总结
前些时间在VMware上安装了Gentoo Linux,用了当前最新版的Gentoo,安装过程记录下来了,但一直没有整理到blog上.今天重新整理一下,写出来与大家分享和备用.接触Gentoo不久,对 ...
- windows 下android react native详细安装配置过程
写在前面: 在网上搜了很多安装配置文档,感觉没有一个真的跟我安装的过程一模一样的,东拼拼西凑凑,总算是装好了,我不会告诉你,断断续续,我花了两天时间...一到黑屏报错就傻眼,幸好在react群里遇到了 ...
- 游戏服务端pomelo完整安装配置过程
版权声明:本文为博主原创文章,转载或又一次发表请先与我联系. https://blog.csdn.net/jonahzheng/article/details/27658985 游戏服务端pomelo ...
- MinGW安装配置过程
MinGW安装过程 一. 下载 MinGW官网下载地址:http://sourceforge.net/projects/mingw/ 二. 安装 1. 双击下载好的压缩文件. 2. 然后出现如下界面, ...
- Saltstack安装配置过程
一.安装配置 1.服务器配置情况 三台服务器,均需要关闭iptables和selinux(否则salt执行指令无效) master: 192.168.60.139 centos slave: 192. ...
- nodejs备忘总结(一) -- node和express安装与配置,新建简单项目(附安装配置过程中遇到问题的解决方法)
安装node 本文以安装node_v8.9.0为例(win10环境),下载node-v8.9.0-x64.msi插件 下载后,安装,安装目录默认为C:\Program Files\nodejs 配置环 ...
随机推荐
- ThreadState属性
这个属性代表了线程运行时状态,在不同的情况下有不同的值,我们有时候可以通过对该值的判断来设计程序流程. ThreadState 属性的取值如下: Aborted:线程已停止: AbortRequest ...
- rsync- sersync -inotify
Rsync简介 Rsync是一款优秀的.快速的.多功能的本地或远程数据镜像同步备份工具.适用于unix/linux/windows等多种平台 从软件的名称Rsync(Remote Rynhroniza ...
- 查看linux上面是否有安装redis,redis启动
1.检测是否有安装redis-cli和redis-server; [root@localhost bin]# whereis redis-cli redis-cli: /usr/bin/redis-c ...
- Discuz!在线中文分词服务
Discuz!在线中文分词服务是基于API返回分词结果的.在项目中,我们只需要一个函数即可方便地进行分词.关键词提取.以下是根据Discuz!在线分词服务API写的函数,测试可正常运行: 代码代码如下 ...
- 【[SCOI2013]摩托车交易 】
倍增什么的最慢了,常数太大了 我们可以上树剖啊 但是如果用树剖来查询树上两点之间的最小边权的话,可能只能在上一棵线段树? 那也太\(naive\)了,尽管倍增常数大,但是还是比两个\(log\)快的 ...
- P1395 会议
题目描述 有一个村庄居住着n个村民,有n-1条路径使得这n个村民的家联通,每条路径的长度都为1.现在村长希望在某个村民家中召开一场会议,村长希望所有村民到会议地点的距离之和最小,那么村长应该要把会议地 ...
- Django中模型(三)
Django中模型(三) 四.模型成员 1.类属性 objects:是Manager类的一个对象,作用是与数据库进行交互. 定义模型类时,没有定义管理器,则默认创建名为objects的管理器. 2.自 ...
- x-frame-options、iframe与iframe的一些操作
iframe的子操作父窗口,父操作子窗口: test.php: <!DOCTYPE html> <html> <head> <title>test< ...
- jquery mobile changepage的三种传参方法介绍
本来觉得changePage 那么多option,传几个参数应该没问题结果翻遍国内外网站,基本方法只有三种 1,显性传参,就是利用url这个地址把参数带上,然后到changepage后的新页面,用函数 ...
- windows ionic bash: command not found
安装好了node.js和npm后,执行npm install -g cordova ionic后,成功安装,但是执行ionic命令后,返回 command not found. 配置好了环境变量后,仍 ...