背景
前段时间在网上看了一些优秀的前端面试者简历,
eg:
http://www.flqin.com/
http://zhangwenli.com/cv/
在我这初初初级阶段看起来是十分高大上的,再看看自己的白纸一张的惨不忍睹的简历,于是萌发了向前辈们学习的心情,首先当然Star和Fork一下啦。然后开干?
关于gulp
最开心的当然是竟然有Gulp中文网(Gulp中文网),虽然对于官方介绍文档也是有些懵懵的,对于里面的“秘籍”,不结合一些实际问题和各路大神的指点解释不一定能懂,但细细查阅下来,简单的安装使用还是没有问题的(应该。。。)
安装流程
- 安装Node、npm
- 选装Cnpm
- 全局安装gulp【特别说明:gulp需要安装两次,一全局,一局部】
- 创建package.json文件
- 安装本地gulp (有大坑)
- 新建gulpfile.js文件
- 安装gulp插件
- 运行Gulp
1.node环境安装&npm
这个因为之前已经装好了就不赘述,方法简单,检查是否已安装方法如下:
2.选装cnpm(官方网址:http://npm.taobao.org)
npm install cnpm -g --registry=https://registry.npm.taobao.org
说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常。。。装上这个东东就快了。。。
注1:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
注2:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。
3、全局安装gulp
npm install -g gulp
检查是否正确安装:
4.创建package.json文件 --初始化项目配置
进入项目目录,创建package.json文件:
npm init -y //直接在后面加上 -y 会自动生成,省去一步步的选择填空操作
5.安装本地(局部)Gulp
在项目文件夹下安装gulp,首先定位到那个目录下,就可以在那个目录下安装本地gulp了:
npm install gulp --save-dev
注1:这里不要使用cnpm,这里不要使用cnpm,这里不要使用cnpm(重要的事情说三遍),使用npm即可(亲测,用cnpm在安装插件后运行gulp的时候会报错?)
不然会遇到各种错误:
注2:–save-dev 是可以省掉你手动修改package.json文件的步骤,正常情况下得连同版本号手动将他们添加到模块配置文件package.json中的依赖里
安装完了以后,在你安装的那个目录下边会发现一个node-modules文件夹,以后用到的gulp插件都会在这个里边了。
6.新建gulpfile.js
说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)。
它大概是这样一个js文件:
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'); //本地安装gulp所用到的地方
//定义一个default任务(自定义任务名称)
gulp.task('default', function () {
console.log("Hello World!");
});
7.安装Gulp插件
安装命令:cnpm install 替换插件名称 --save-dev
这里按照网上一些介绍装四个较基础的
- 语法检查 (gulp-jshint)
- 合并文件 (gulp-concat)
- 压缩代码 (gulp-uglify)
- 文件重命名 (gulp-rename)
8.运行Gulp
gulp default 或 gulp
以上为目前正常使用的gulp初次接触和安装方法,可能还存在一些问题,待日后遇到会再详细聊聊。O(∩_∩)O
参考链接:
https://www.cnblogs.com/rion1234567/p/5556891.html
http://www.ydcss.com/archives/18