简简单单学习gulp的入门与使用

gulp的入门与使用

• 安装
• 使用

gulp的入门

安装

安装gulp需要使用到nodo.js,安装链接如下：
http://jingyan.baidu.com/arti...

安装完成之后我们以全局安装gulp
打开命令提示行，输入以下命令:

npm install gulp-cli -g

然后我们建立自己的项目
在自己的项目目录下，打开命令提示行，因为我们需要
" package.json "文件，所以我们需要输入以下命令：

npm init

之后我们需要在项目目录下安装gulp
输入以下命令

npm install gulp -D

我们还需要自己手动建立一个gulpfile.js文件，
打开gulpfile.js,输入以下代码：

var gulp = require('gulp');
// 引入gulp
gulp.task('default', function() {
  console.log("测试");
});

在刚刚的命令提示行输入：

gulp

得到以下输出

Using gulpfile F:\web\gulpfile.js
Starting 'default'...
测试
Finished 'default' after

说明你的gulp已经安装成功。

gulp的使用

首先，我们需要在gulp官网下载插件，地址如下:

https://gulpjs.com/plugins/

在这个网站我们可以寻找到自己需要的插件（以gulp-imagemin为例），然后在项目下打开命令提示行，输入以下命令：

npm install --save-dev gulp-imagemin --save-dov

然后我们在gulpfile.js里输入一下代码:

const imagemin = require('gulp-imagemin');
// 引入插件
gulp.task('default', () =>
    gulp.src('src/images/*')
        .pipe(imagemin())
        // 调用插件
        .pipe(gulp.dest('dist/images'))
        // 输出位置
);