搭建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