记学习前端构建工具gulp的过程，略心酸

　　初学前端的时候就听过友人说，前端很差学，不少软件都是要本身下载安装插件的，当时是很不觉得然的，不就是下载几个软件外加安装插件吗？！怎么会很难呢！后面才发现本身真的错了。

　　今天恰好准备好好看看前端构建工具gulp的使用，因而乎就各类上网查资料。刚开始的时候有点摸不着头脑，这个东西不是一个软件，拿来就用，须要本身配置环境，本身根据需求安装package，彻底是本身DIY的一个工具。

　　下面就把整个安装过程，记录下来，方便之后查看吧。

　　先明确几个概念：一、gulp是基于node.js环境下工做的；二、命令行是指的那个黑框框，在OSX是终端（Terminal），在windows是命令提示符（CMD）；三、npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；四、经常使用的命令行；

　　下面按照安装的步骤来说述安装的过程：

　　一、安装node.js环境，在node.js官网下载安装；

　　二、打开命令行工具，按照如下代码，全局安装gulp；

　，

　　三、建立一个用做gulp操做的文件夹（之后的一些构建任务均可以在这个文件夹中进行），并在该文件夹下新建如下两个文件【package.json文件内要输入一对花括号】，

　　四、以后在命令行工具内定位到3中建立的文件夹，并输入图中指令，如图显示的是运行以后的结果，此过程是在文件夹中安装gulp并将gulp版本同步到package.json中。

　　以上四步操做完了以后gulp就算是安装好了，那么接下来就是安装具体的插件，gulp很强大，可能用到的只是其中几个插件而已。下面就以我安装的第一个插件，css压缩插件  gulp-minify-css  为例说明

　　五、如同在again文件夹中安装gulp同样，只须要输入下图中代码就能够将该插件安装到gulp中了【由图中提示能够看出来，gulp官方建议安装gulp-clean-css来做为gulp-minify-css的替代品】

　　六、安装好插件以后就是使用了，这里就要用到以前第三步中建立的gulpfile.js文件了。先说下插件的工做机理：安装的插件其实就是gulp中的一个方法，在gulpfile.js中经过获取这些方法，从而达到相应的功能。那么实际上在js文件中，写了什么呢？看下图，不不，这里贴代码比较合适。

var gulp = require('gulp'),
minifyCss = require("gulp-minify-css"); 　 //分别获取gulp和gulp-minify-css这两个框架【能够这么说吗？】
 
gulp.task('minify-css', function () {　 　//定义任务，包括任务名和任务的内容
    gulp.src('css/*.css') 　　　　　　　　 //要压缩的css文件
    .pipe(minifyCss()) 　　　　　　　　　  //压缩css
    .pipe(gulp.dest('dist/css'));　　　　//压缩后文件保存的位置
});

　　七、至此，全部准备工做都作好了，【安装了gulp、安装了minify-css插件、在gulpfile.js中写了任务逻辑】接下来咱们把须要压缩的文件地址输入gulp.src('xxx’)中，而后打开命令行工具，定位到again文件夹下，敲入图中圈出代码。任务正确执行，宁且在指定目录下生成了压缩后的文件。

至此，本次gulp的探索算是告一段落，之后确定会用到更多的插件，到时候同时安装多个插件应该也没问题。

为了减小文件数量，多个js任务能够写在一个文件里面，下面是gulpfile.js文件的通常格式，

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var minifyCss = require('gulp-minify-css');
// var jshint = require('gulp-jshint');
// var sass = require('gulp-sass');
// var concat = require('gulp-concat');
// var uglify = require('gulp-uglify');
// var rename = require('gulp-rename');

// CSS文件压缩
gulp.task('minify-css', function () {
    gulp.src('css/main.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

// 检查脚本
// gulp.task('lint', function() {
//     gulp.src('js/老师的框架.js')
//         .pipe(jshint())
//         .pipe(jshint.reporter('default'));
// });

// // 编译Sass
// gulp.task('sass', function() {
//     gulp.src('./scss/*.scss')
//         .pipe(sass())
//         .pipe(gulp.dest('./css'));
// });

因为我只安装了gulp-minify-css这一个插件，若是不将其余插件代码注释掉是会报错的，各类未指定的变量啊啥的。。

 

【本文··完】