关于前端自动化工具Gulp的使用(一)——初次接触与安装

背景

前段时间在网上看了一些优秀的前端面试者简历,
eg:
http://www.flqin.com/
http://zhangwenli.com/cv/
在我这初初初级阶段看起来是十分高大上的,再看看自己的白纸一张的惨不忍睹的简历,于是萌发了向前辈们学习的心情,首先当然Star和Fork一下啦。然后开干?

关于gulp

最开心的当然是竟然有Gulp中文网(Gulp中文网),虽然对于官方介绍文档也是有些懵懵的,对于里面的“秘籍”,不结合一些实际问题和各路大神的指点解释不一定能懂,但细细查阅下来,简单的安装使用还是没有问题的(应该。。。)

安装流程

  1. 安装Node、npm
  2. 选装Cnpm
  3. 全局安装gulp【特别说明:gulp需要安装两次,一全局,一局部】
  4. 创建package.json文件
  5. 安装本地gulp (有大坑
  6. 新建gulpfile.js文件
  7. 安装gulp插件
  8. 运行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

这里按照网上一些介绍装四个较基础的

  1. 语法检查 (gulp-jshint)
  2. 合并文件 (gulp-concat)
  3. 压缩代码 (gulp-uglify)
  4. 文件重命名 (gulp-rename)
8.运行Gulp
gulp default  或  gulp

以上为目前正常使用的gulp初次接触和安装方法,可能还存在一些问题,待日后遇到会再详细聊聊。O(∩_∩)O
参考链接:
https://www.cnblogs.com/rion1234567/p/5556891.html
http://www.ydcss.com/archives/18

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章