#gulp 入门使用

##首先 环境搭建

gulp的安装

首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

npm install -g gulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install gulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：

npm install --save-dev gulp

第一步：创建项目文件夹

mkdir product name 

第二步：初始化，创建package.json文件

npm init

第三步：手动在项目文件夹中创建gulpfile.js文件

第四步：安装依赖模块儿，拿几个常用的模块儿来举例吧

在package.json文件下方复制以下代码

 "dependencies": {
"gulp": "^3.9.1",
"gulp-htmlmin": "^1.3.0",
"gulp-less": "^3.0.5",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^1.5.3"
 }

然后在控制台输入以下代码来安装这些依赖模块儿

npm install

第五步：手动创建项目目录，一个最简单的项目目录其结构应该是这样的

第六步：在主文件gulpfile.js中创建任务执行任务

1⃣️引入所需模块儿，简明举几个常用栗子

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var mincss = require('gulp-minify-css');
var minhtml = require('gulp-htmlmin');

2⃣️gulp执行所有的任务

gulp.task('default',['uglify','less'])

3⃣️gulp执行分步的任务，就是第1⃣️步里的数组里面的任务

gulp.task('uglify',function(){
    gulp.src('./src/js/*js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
})

上面的代码作用就是找到js源文件，压缩文件，并导入最终上线的文件夹dist中

gulp.task('less',function(){
    gulp.src('./src/css/*.less')
    .pipe(less())
    .pipe(mincss())
    .pipe(gulp.dest('./dist/css'))
})

上面的代码作用是找到css文件，压缩文件，并导入最终上线的文件夹dist中

4⃣️可以执行的任务还有很多，这里不再一一举例，下面看一下怎样监听源文件的变化，进而省去每写一步就要执行gulp命令的麻烦，实现自动化

gulp.task('watch',function(){
    gulp.watch(['./src/css/*less','./src/js/*js'],function(){
        gulp.run('less');
        gulp.run('uglify');
    })
})

简单的一个使用教程先到这里