gulp是基于流的自动化工具,关键字:自动.
我也是非常喜欢自动的东西,尤其能帮我省下好多时间,提高效率,更重要的是能提高B格;
下面就来看看如何创建;
1.cnpm init 初始化项目
2.cnpm install gulp 安装gulp 并用gulp -v查看版本号
3.cnpm install 安装所需要的依赖包
cnpm install gulp-connect --save-dev
cnpm install gulp-concat --save-dev
cnpm install gulp-rename --save-dev
cnpm install gulp-uglify --save-dev
也可以到本人的码云上下载package.json
执行cnpm install就可以了;
4.在根目录下创建gulpfile.js文件;
写入以下 代码
var gulp =require('gulp');
var connect = require('gulp-connect');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require("gulp-rename");
var jsSrc='./js/*.js';
var jsDist= './dist/js';
var htmlSrc='./*.html';
var htmlDist='./dist';
var cssSrc='./css/*.css';
var cssDist='./dist/css';
gulp.task('js',function(){
gulp.src(jsSrc)
.pipe(concat('index.js'))
.pipe(gulp.dest(jsDist))
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest(jsDist))
.pipe(connect.reload())
});
gulp.task('html',function(){
console.log("调用html了");
gulp.src(htmlSrc)
.pipe(gulp.dest(htmlDist))
.pipe(connect.reload())
});
gulp.task('css',function(){
console.log("调用css了");
gulp.src(cssSrc)
.pipe(concat('index.css'))
.pipe(gulp.dest(cssDist))
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest(cssDist))
.pipe(connect.reload())
});
gulp.task('connect', function() {
connect.server({
livereload: true,
port:8182
});
});
gulp.task('watch',function(){
gulp.watch('./*.html',['html']);
gulp.watch('./css/*.css',['css']);
gulp.watch('./js/*.js',['js'])
});
gulp.task('default',['js','html','connect','watch','css']);
可以到本人的开源项目中:http://git.oschina.net/kaykie/zidong 下载并安装