前端构建工具Gulp入门指南(第一篇)

下面我们一步步安装配置gulp所需环境及gulp工具的入门使用

第一步安装Node环境

第二步安装gulp

第三步新建项目并建立gulp环境依赖

第四步 新建配置gulpfilejs文件并运行gulp

第一步：安装Node环境

首先我们要安装gulp工具依赖的运行环境node，访问http://nodejs.org ，然后下载完成后运行安装即可。

检查node环境是否完成安装成功，执行命令如下：

node -v //输出node版本号

npm -v  //输出npm版本号

以上两个命令都可输出版本信息即表示node环境安装成功。

第二步：安装gulp

全局安装gulp，执行命令如下：

npm install --global gulp   //全局安装gulp工具

gulp -v //检查gulp是否安装成功

第三步：新建项目并建立gulp环境依赖

执行命令如下：

mkdir testapp && cd mkdir testapp //testapp 表示项目名称

npm init //创建项目，如果权限不够加上sudo执行，按照提示一步步操作即可

npm install --save-dev gulp //建立项目的gulp依赖

npm install gulp-less gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev //载入gulp所需插件

使用 —-save-dev 来更新package.json文件、 devDependencies 的值，表明项目依赖gulp。

常用的gulp插件如下：

编译Lass (gulp-lass)

Autoprefixer (gulp-autoprefixer)

缩小化(minify)CSS (gulp-minify-css)

JSHint (gulp-jshint)

拼接 (gulp-concat)

丑化(Uglify) (gulp-uglify)

图片压缩 (gulp-imagemin)

即时重整(LiveReload) (gulp-livereload)

清理档案 (gulp-clean)

图片快取，只有更改过得图片会进行压缩 (gulp-cache)

更动通知 (gulp-notify)

第四步： 新建配置gulpfile.js文件，并运行gulp

在项目根目录新建一个gulpfile.js文件，文件代码如下：

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

// 引入组件
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 检查脚本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

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

// 合并，压缩文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('lib.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('build_dev', function(){
gulp.run('lint', 'less', 'scripts');

// 监听文件变化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'less', 'scripts');
});
});

然后运行gulp，执行命令为：

gulp build_dev

参考链接为：

gulp官方网址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API：http://www.ydcss.com/archives/424