【gulp】gulp安装及使用初探

gulp安装

步骤：安装nodejs -> 全局安装gulp -> 新建package.json文件->

项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1.1安装nodejs

       说明：gulp是基于nodejs，理所当然需要安装nodejs；

安装：进入nodejs官网（https://nodejs.org/en/）下载安装。

1.2全局安装gulp

安装前先介绍下npm与cnpm：

npm：（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

cnpm：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”；

另外，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。

 

回到主题，全局安装gulp：

说明：全局安装gulp目的是为了配置gulp环境，让你的task能执行gulp任务；

安装：命令提示符执行cnpminstall gulp -g；

查看是否正确安装：命令提示符执行gulp-v，出现版本号即为正确安装。

1.3新建package.json文件

package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。它既可以手动创建，也可以通过命令提示符执行cnpm init创建（推荐此方法）。

 

查看package.json帮助文档，命令提示符执行cnpm helppackage.json

由于package.json是一个普通json文件，所以不能添加任何注释。

 

1.4项目安装gulp以及gulp插件

大家可能会觉得有些奇怪，刚不是安装了gulp吗？对，那是全局安装，为的是能在端终运行gulp任务的，这里是项目级别的安装，真正的gulp模块安装到项目的node_modules/下了，后面的插件都是依赖gulp模块的。

安装：执行命令：cnpm install gulp --save-dev

参数说明：-save 自动把模块和版本号添加到dependencies部分；

              -save-dev 自动把模块和版本号添加到devDependencies部分；

那 package.json 文件里面的 devDependencies  和 dependencies对象有什么区别呢？

devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

 

安装完本地gulp后，我们可以安装gulp插件了。gulp插件使我们的项目变得丰富有趣起来，例如：她可以把我们的项目整合易于发布，把我们的js、css、html等文件压缩、合并、去重等等。。。

gulp插件安装

安装本地gulp后，我们可以开始安装插件了。例如gulp有个插件名为gulp-uglify，我们可以执行以下命令安装该插件：

执行命令：cnpm installgulp-uglify --save-dev

 

1.5配置gulpfile.js

要安装插件，我们先在项目根目录下创建gulpfile.js文件（重要），这个文件的作用是来承载我们要用到的插件的。编写如下代码，这些代码没什么好解释的，具体可以参考gulp的api

/*引入gulp及相关插件require('node_modules里对应模块')*/

var gulp =require('gulp');

var minifyCss =require("gulp-minify-css");

var uglify =require('gulp-uglify');

var concat =require('gulp-concat');

//压缩

gulp.task('minify-css',function () {

    gulp.src('css/*.css')

        .pipe(minifyCss())

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

});

//

gulp.task('script',function () {

    gulp.src(['src/a.js',"src/b.js"])

        .pipe(concat('all.js'))

        .pipe(uglify())

        .pipe(gulp.dest('dist/js'));

});

gulp.task('default',['minify-css','script']);

 

解析下上面代码：

var gulp =require('gulp');

在gulpfile中先载入gulp包，因为这个包提供了一些API

 

var minifyCss =require("gulp-minify-css");

var uglify =require('gulp-uglify');

var concat =require('gulp-concat');

引入3个已安装的gulp插件包：gulp-minify-css（css压缩混淆）、gulp-uglify（js压缩混淆）和gulp-concat（合并文件）

 

gulp.task('minify-css',function () {  //定义一个名为：minify-css的task，作为执行gulp                          //依据

    gulp.src('css/*.css') //检索css文件夹下的所有.css文件

        .pipe(minifyCss()) //执行压缩方法

        .pipe(gulp.dest('dist/css/')); //压缩后的css文件输出到dist/css/下

});

 

执行插件task：

定位到你的项目，使用命令：gulp taskname。例如上述例子，可以执行gulpminify-css