从零开始的gulp之旅

2018-11-20 本文已影响0人论宅

从零开始的gulp使用之旅

step1：安装node.js

从node官网上下载node.js，注意不要下载最新版本，最新版本一般都不稳定，就笔者目前情况而言8.0版本就足够了。理论上node傻瓜包会自带环境变量的安装，如果仍然不行请按照网上的提示安装。例如：https://www.runoob.com/nodejs/nodejs-install-setup.html
官方网址： https://nodejs.org/en/
下载之后，安装git软件。
官方网址： https://git-scm.com/download/win
当然理论上你也可以使用普通的cmd窗口，但是git有各种各样方便的功能，例如：记录历史操作——它会记录用户在其上使用过的所有命令，按下键盘的[上]，便可搜索，而且记录不会随着关闭窗口，关闭系统而消失，其他的还有下载github仓库代码，右键gitbush here命令可以直接让git进入当前目录（不需要反复的cd进入目录）等等强力的功能。

step2：安装npm

打开git（右键gitbush here）或者cmd窗口。
理论上在安装node的时候npm就已经安装好了，使用以下命令确认安装情况：

// node版本信息
node -v
// npm版本信息
npm -v

如果有错，请看：https://blog.csdn.net/zimushuang/article/details/79715679

step3：安装gulp

gulp工具非常强大，从提供本地服务器到各种插件的提供应有尽有，首先我们安装全局gulp。

npm install gulp -g

使用该命令会安装gulp到全局，无论在任何位置都可以使用以gulp打头的命令。当然，一般来说这个阶段我们都只用一个命令：

npm install gulp --save-dev

这段命令会安装gulp到窗口目前所在目录下，也就是说你cd或者gitbush here到的目录下。使用了这个命令后，该目录下会出现大量node_modules文件夹，里面是各种工具，这个暂且不说。

step4：新建package.json文件

该文件是gulp的配置文件，你可以使用

gulp init

按照提示一步步的去生成（一般来说填一个项目名称就够了），也可以从其他项目中考一个干净的json过来使用。

step5：填充文件结构

将html，css，js，image等文件，文件夹依次放进来。也可以使用一个优达默认的文件结构：
https://github.com/udacity/ud892

step6：创建gulpfile.js

如果你已经从其他项目上拷过来了该文件，确定一下你已经安装了gulpfile.js中需要安装的工具了。
该文件是工具管理文件，工具的使用，gulp的使用基本上都在这里进行。下文是一个简答的gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function() {
    gulp.watch('sass/**/*.scss',["styles"])
});

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(gulp.dest('./css'));
});

里面添加了两种工具：
gulp-sass：使用sass编译css，基本上css并不是直接写出来的，而是通过sass和同类型的工具一起编译出来，这样程序猿就只需要编写基本css，剩下的压缩和兼容都会由他去完成。
gulp-autoprefixer:编译时自动添加兼容写法。当你在sass中写代码，而该css有兼容写法时，编译之后便会在生成文件的css中添加这些兼容代码：

// sass文件
.main-page {
    width: 300px;
    height: 300px;
    background: red;
    animation: anim 3s linear both infinite;
    
}
@keyframes anim{
    0% {background: yellow}
    
    50% {background:green}
}

// 编译后的css文件
.main-page {
    width: 300px;
    height: 300px;
    background: red;
    -webkit-animation: anim 3s linear both infinite;
    animation: anim 3s linear both infinite;
}

@-webkit-keyframes anim {
    0% {
        background: yellow;
    }
    50% {
        background: green;
    }
}

@keyframes anim {
    0% {
        background: yellow;
    }
    50% {
        background: green;
    }
}

以上工具便可以构成一个基本的项目代码。

项目命令集合：

npm install gulp -g
npm init
npm install gulp --save-dev
// 插件安装代码都一样npm install XXX
npm install gulp-sass --save-dev
npm install gulp-autoprefixer --save-dev
// 将文件结构补完
// 使用gulp命令，如
// 执行默认命令
gulp
// 上文中gulpfile.js中第九行创建的styles命令：
gulp styles

后期注意（重要）：

npm使用起来非常坑而且需要翻墙，所以我们需要将npm换源，换成淘宝源：

// 换源
$ npm config set registry https://registry.npm.taobao.org/

// 查看
$ npm config get registry

使用watch动态监听文件修改

    gulp.watch('sass/**/*.scss',["styles"])

使用工具的时候，我们总是一遍又一遍的手动编译，然后等待，最后刷新页面查看结果，但是使用watch代码可以帮我们自动编译，当检测到文件有被修改（参数1），就会执行命令styles（参数2）。