gulp的构建

搭建gulp


gulp网址:http://www.gulpjs.com.cn/

gulp插件网址:http://gulpjs.com/plugins/

1.创建项目文件夹 - ->安装gulp文件 sudo npm install –global gulp(sudo是为了获取权限)

2.项目初始化 - ->在gulp下 npm init

3.npm install –save-dev gulp 作为项目的开发依赖(devDependencies)安装

4.配置gulp插件 npm install –save-dev gulp-concat或者 npm install gulp-concat –save-dev

配置 gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var jsmin =require('gulp-jsmin');
gulp.task('kangkang',function(){
return gulp.src('js/*.js’)    //获取js文件夹下的所有js文件路径相对于gulpfile.js来的  {gulp.src() 目标文件}
.pipe(concat('new.js'))     //所有js文件合并成一个新的名为new.js的文件中  {gulp-concat 合并文件}
.pipe(jsmin())     //将js文件压缩(ps:这一步要在合并完成之后再进行) {pipe() 管道,上面的输出就是下面的输入}
.pipe(gulp.dest('newJS/'))     //新文件的存放位置即新的文件夹 {gulp.dest 目标输出}
})

gulp.task()3个参数 1.任务名 2.任务依赖3.回调

任务名即kangkang,直接在终端(gulp)里gulp kangkang;

gulp.task(‘default’,[‘a’,’b’],function(){ console.log(‘haha’)});
gulp.task(‘a’,function(){ console.log(‘a’)})
gulp.task(‘b’,function(){console.log(‘b’)})

[‘a’,’b’]即任务依赖,ab需要按照顺序来执行,且default最后执行;

回调,即function函数;

ulp-jsmin js文件压缩
gulp-cssmin css文件压缩
gulp-htmlmin html文件压缩

gulp文件到线上


1、在gulp下新建文件夹html 2、html下新建四个文件夹

1、desk—>html,css,js 最后压缩好放在线上的文件夹

2、public—>js 公共用的第三方插件库,jquery等

3、src—>css,js 原生的css,js文件

4、views—>html文件 所有的html文件

5、html里新建gulpfile.js、package.json、README.md文件

6、在gulp文件下里进行配置jade等文件, npm install gulp-jade –save-dev

gulpfile.js代码

var gulp = require('gulp');
var concat = require('gulp-concat');
var jade = require('gulp-jade');

gulp.task('kang',function(){
return gulp.src('views/*.jade')
.pipe(concat('index.html'))
.pipe(gulp.dest('desk/html/'))
})

终端在html中输入gulp kang