安装gulp步骤和使用方法

1.使用npm命令安装,一下两个命令都需要使用

gulp的安装非常简单，只要使用npm命令安装即可。但是因为gulp需要作为命令行的方式运行，因此需要在安装在系统级别的目录中。

npm install gulp -g

因为在本地需要使用require的方式gulp。(需要进入到项目的路径下面)因此也需要在本地安装一份：

npm install gulp --save-dev

2 创建gulp任务： 

要使用gulp来流程化我们的开发工作。首先需要在项目的根目录下创建一个gulpfile.js文件。然后在gulpfile.js中填入以下代码：

var gulp = require("gulp")

gulp.task("greet",function () {
    console.log('hello world');
});

这里对代码进行一一解释：

1. 通过require语句引用已经安装的第三方依赖包。这个require只能是引用当前项目的，不能引用全局下的。require语法是node.js独有的，只能在node.js环境下使用。

2. gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字，第二个参数是一个函数，就是执行这个命令的时候会做什么事情，都是写在这个里面的。

3. 写完以上代码后，以后如果想要执行greet命令，那么只需要进入到项目所在的路径，然后终端使用gulp greet即可执行。

 

3. 创建处理css文件的任务：

gulp只是提供一个框架给我们。如果我们想要实现一些更加复杂的功能，比如css压缩，那么我们还需要安装一下gulp-cssnano插件。gulp相关的插件安装也是通过npm命令安装，安装方式跟其他包是一模一样的（gulp插件本身就是一个普通的包）。
对css文件的处理，需要做的事情就是压缩，然后再将压缩后的文件放到指定目录下（不要和原来css文件重合了）！这里我们使用gulp-cssnano来处理这个工作：

npm install gulp-cssnano --save-dev

然后在gulpfile.js中写入以下代码：

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")

// 定义一个处理css文件改动的任务
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(gulp.dest("./css/dist/"))
});

以上对代码进行详细解释：

1. gulp.task：创建一个css处理的任务。
2. gulp.src：找到当前css目录下所有以.css结尾的css文件。
3. pipe：管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano。
4. gulp.dest：将处理完后的文件，放到指定的目录下。不要放在和原文件相同的目录，以免产生冲突，也不方便管理。

 

 4. 修改文件名：

像以上任务，压缩完css文件后，最好是给他添加一个.min.css的后缀，这样一眼就能知道这个是经过压缩后的文件。这时候我们就需要使用gulp-rename来修改了。当然首先也需要安装npm install gulp-rename --save-dev。示例代码如下：

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
});

在上述代码中，我们增加了一行.pipe(rename({"suffix":".min"}))，这个我们就是使用rename方法，并且传递一个对象参数，指定修改名字的规则为添加一个.min后缀名。这个gulp-rename还有其他的指定文件名的方式，比如可以在文件名前加个前缀等。更多的教程可以看这个：https://www.npmjs.com/package/gulp-rename。 

5. 创建处理js文件的任务： 

处理js文件，我们需要使用到gulp-uglify插件。安装命令如下：

npm install gulp-uglify --save-dev

安装完后，我们就可以对js文件进行处理了。示例代码如下：

var gulp = require("gulp")
var rename = require("gulp-rename")
var uglify = require('gulp-uglify');
gulp.task('script',function(){
    gulp.src(path.js + '*.js')
    .pipe(uglify())
    .pipe(rename({suffix:'.min'}))
    .pipe(gulp.dest('js/'));
});

这里就是增加了一个.pipe(uglify())的处理，对js文件进行压缩和丑化（修改变量名）等处理。更多关于gulp-uglify的教程。请看：https://github.com/mishoo/UglifyJS2#minify-options。

6. 合并多个文件： 

 

在网页开发中，为了加快网页的渲染速度，有时候我们会将多个文件压缩成一个文件，从而减少请求的次数。要拼接文件，我们需要用到gulp-concat插件。安装命令如下：

npm install gulp-concat --save-dev

比如我们现在有一个nav.js文件用来控制导航条的。有一个index.js文件用来控制首页整体内容的。那么我们可以使用以下代码将这两个文件合并成一个文件：

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('vendorjs',function(){
    gulp.src([
        './js/nav.js',
        './js/index.js'
    ])
    .pipe(concat('index.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'));
});

7. 压缩图片： 

 

图片是限制网站加载速度的一个主要原因。图片越大，从网站上下载所花费的时间越长。因此对于一些图片，我们可以采取无损压缩，即在不改变图片质量的基础之上进行压缩。在gulp中我们可以通过gulp-imagemin来帮我们实现。安装命令如下：

npm install gulp-imagemin --save-dev

压缩图片也是一个比较大的工作量，对于一些已经压缩过的图片，我们就没必要再重复压缩了。这时候我们可以使用gulp-cache来缓存那些压缩过的图片。安装命令如下：

npm install gulp-cache --save-dev

两个插件结合使用的代码如下：

var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('image',function(){
    gulp.src("./images/*.*")
    .pipe(cache(imagemin()))
    .pipe(gulp.dest('dist/images/'));
});

8. 检测代码修改，自动刷新浏览器： 

 

以上我们实现了更改一些css文件后，可以自动执行处理css的任务。但是我们还是需要手动的去刷新浏览器，才能看到修改后的效果。有什么办法能在修改完代码后，自动的刷新浏览器呢。答案是使用browser-sync。browser-sync安装的命令如下：

npm install browser-sync --save-dev

browser-sync使用的示例代码如下：

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
var bs = require("browser-sync").create()

gulp.task("bs",function () {
    bs.init({
        'server': {
            'baseDir': './'
        }
    });
});

// 定义一个处理css文件改动的任务
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
    .pipe(bs.stream())
});

// 定义一个监听的任务
gulp.task("watch",function () {
    gulp.watch("./css/*.css",['css'])
});

// 执行gulp server开启服务器
gulp.task("server",['bs','watch'])

以上我们创建了一个bs的任务，这个任务会开启一个3000端口，以后我们在访问html页面的时候，就需要通过http://127.0.0.1:3000的方式来访问了。然后接下来我们还定义了一个server任务。这个任务会去执行bs和watch任务，只要修改了css文件，那么就会执行css的任务，然后就会自动刷新浏览器。
browser-sync更多的教程请参考：http://www.browsersync.cn/docs/gulp/。