gulp入门案例

1.gulp需要有node.js的环境，进入官网下载node.js，可以直接运行安装。

2.安装好node.js后，在e盘下新建test文件夹。

3.在test目录下进入命令行，首先安装淘宝的cnpm，操作命令如下：

4.安装全局的gulp：

5.初始化package.json：

6.安装工程目录下的gulp以及一系列组件，下面没有进行gulp-conenct的安装。也需要进行安装：

7.test下的目录结构为：

8.工程目录下直接编写gulpfile.js文件：

var gulp = require('gulp'),

mincss = require('gulp-mini-css'),

uglify = require('gulp-uglify');

concat = require('gulp-concat');

connect = require('gulp-connect');

var src_css = './src/css',

dest_css = './dest/css',

src_js = './src/js',

dest_js = './dest/js';

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

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

.pipe(mincss().on('error', function(e){

console.log(e);

})) //用于查找出错点

.pipe(gulp.dest(dest_css));

});

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

gulp.src(src_js+'/*.js')

.pipe(uglify().on('error', function(e){

console.log(e);

}))//用于查找出错点

.pipe(concat("all.min.js"))//合并文件

.pipe(gulp.dest(dest_js));

});

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

gulp.watch(src_css+'/*.css',['mincss']);

gulp.watch(src_js+'/*.js',['minjs']);

});

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

connect.server();

}); //服务器

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

gulp.run('minjs','mincss');

gulp.run('watch');

gulp.run('connect');

});

10.编写模板文件，用于读写json数据：

11.命令行，运行gulp。

12.打开网页查看效果，修改js引用无影响：