首先:电脑需要安装 Node.js 一个大绿色的安装按钮,点击就可以。
但还是推荐,点击download选中一款适合电脑配置的版本。
Node安装过程,就是下一步 and 下一步~~
测试手否安装成功:
node -v
现在开始安装 gulp.js
全局安装gulp
npm install -g gulp
安装好后,把gulp安装到本地
npm install --save-dev gulp
现在可以用安装本地的方法分别把如下插件安装上:
编译Sass (gulp-ruby-sass)与[gulp-sass]都可以
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
var gulp = require('gulp');
// 引入组件
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');
// 检查脚本
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.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
这样就可以了:接下来介绍点细节与其它需要了解的。
gulp只有五个方法: task,run,watch,src,和dest,在项目根目录新建一个js文件并命名为gulpfile.js
另外,为何安装插件的时候需要加 --save-dev
是想把插件放入开发列表里面,这样 npm install初始化安装的时候,就会根据这个表来进行相应下载。
这个文件名为package.json
当然这个文件可以复制粘贴,当然有一种方法可以初始化它。
npm init
根据步骤提示就可以自动生成了。具体文档内容请参考。linlincat 的 github
这里面有个许可证号,之前是可随意配置的,现在不了解具体原因,默认就可以了。官网有详细解释。
现在就可以放心使用你的gulp去执行[管理]你的项目了。
{
"name": "test", //项目名称(必须)
"version": "1.0.0", //项目版本(必须)
"description": "This is for study gulp project !", //项目描述(必须)
"homepage": "http://www.dtao.org", //项目主页
"repository": { //项目资源库
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"author": { //项目作者信息
"name": "surging",
"email":
"
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}