下面我们一步步安装配置gulp所需环境及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