如何在Mac环境中下载使用gulp

1、安装

1.创建项目

2.安装gulp

3.创建gulpfile.js文件

4.运行gulp

1.创建项目

创建项目文件夹命名为firstGulp，并在firstGulp目录下运行 sudo npm init 。npm init 会创建packjson文件，用于保存与项目有关的文件信息。创建步骤直接按回车跳过就好。

我们可以根据项目自身情况手动输入 ，也可设置为空。

当然在最后，需要手动确认信息。确认之后，会在firstGulp项目目录下生成一个packjson.json文件

确认之后，在firstGulp目录下生成的packjson.json文件如下。 

 

2.安装gulp

在安装gulp之前，一起来梳理下什么是全局安装，什么是本地安装。

2.1 什么是全局安装？

在项目目录中执行以下命令：

sudo npm install gulp -g 或者 sudo npm install gulp --global

全局环境下安装gulp，目的在于能够在命令行中使用gulp命令执行gulp。

通过npm  root -g 查看在全局环境下安装的路径

2.2 什么是本地安装？

在项目目录中执行以下命令：

1. sudo npm install gulp 或者 sudo npm install gulp --save-dev 或者 sudo npm install gulp --save
2. sudo npm install gulp --save 自动把模块和版本号添加到packjson.json文件中的dependencies部分

 

  

2.3 什么要先全局安装再本地安装？

1.全局安装是为了可以通过命令行执行gulp命令。而且如果有多个项目都需要使用gulp，只需要全局安装一次即可。

2.根据项目情况，我们一般会选取gulp插件通过require()的方式引入到gulpfile.js中，如果只使用全局安装，需要手动配置路径来解决模块引入问题。通过在本地安装gulp可以很好的解决这个问题。

3.本地安装可以让每个项目都有一个独立的包，并且组织各个包之间的依赖。不受全局包的影响。换句话说，如果只在全局安转gulp，那么会造成多个项目共用同一个版本的gulp。

4.方便项目的打包，复制等操作。

3.创建gulpfile.js文件

var gulp = require("gulp");//引入本地安装的 gulp模块
gulp.task("default",function(){//default 为默认任务名，这种情况只需要在命令行中输入 gulp即可。 如果有特定的taskName,需要在命令行中实行 gulp taskName
　　console.log("hi, gulp wangli")
})

 

4.运行gulp 

2、使用gulp

1、抽取公共部分代码并压缩

（1）安装插件 

（2）引入插件

（3）建立任务

const gulp = require('gulp')
//引入插件
const htmlmin = require('gulp-htmlmin')
const fileInclude = require('gulp-file-include')


gulp.task('first',callback =>{
    gulp.src('../src/css/base.css')

    .pipe(gulp.dest('../dist/css'))
    callback();
})

gulp.task('htmlmin',callback =>{
    
    gulp.src('./src/*.html')

    .pipe(fileInclud()

    ) 

    .pipe(htmlmin({
        collapseWhitespace:true
    }))

    .pipe(gulp.dest('./dist'))
    callback();
})

（4）在终端运行任务

可以看到我们的dist文件中多了2个压缩过的html文件 

 

2、转换less语法并进行css文件压缩 

（1）安装插件 

sudo npm install gulp-less
sudo npm install gulp-csso

可以在package.json文件中看到就说明安装成功

（2）引入插件

const less = require('gulp-less')
const cssmin = require('gulp-csso')

（3）在css文件夹下建立less文件

(4)建立任务

gulp.task('cssmin',callback=>{
    gulp.src(['./src/*.css','./src/css/*.less'])

    .pipe(less())
    .pipe(cssmin())

    .pipe(gulp.dest('./dest/css'))
    callback();
})

(5)执行任务