gulp学习笔记

公司现在用的是gulp工具所以写一下自己的理解
gulp安装我就不重复说咯网上有挺多
主要是node.js
用node的npm来安装gulp和gulp的插件
主要步骤：
1.npm install gulp -g 安装全家gulp安装完用gulp -v查看版本
2.项目根目录package.json文件（注意：json文件内是不能写注释的下面
注释是方便看而已）

{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is for study gulp project !",   //项目描

述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "surging",
    "email": "surging2@qq.com"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

　　

可以手动新建这个配置文件，或命令提示符执行npm init

附上查看package.json帮助文档，命令提示符执行cnpm help package.json

然后就装gulp的插件
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
像这样子当然单个单个装也可以 npm install gulp-jshint
或者你以前用过的项目里的package.json里的插件你直接把package.json放到根目录然后npm install他就帮你装完啦哇哈哈！！！

最后也就是我要说的gulpfile.js要写了他才能运行哦
gulp只有五个方法： task ， run ， watch ， src ，和 dest （start，pipe都不算咩不过run和start好像是一样的）

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');
 
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成

index.css
});
 
gulp.task('default',['testLess', 'elseTask']); //定义默认任务 

elseTask为其他任务，该示例没有定义elseTask任务
默认任务就是说你在命令行里执行gulp 或者gulp default的时候执行。
 
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依

赖任务名称 fn：回调函数（个人认为啊这个执行顺序啊应该是依赖任务然后是当前任务然后才是回调fn）
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的
文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径


gulp.task('watches', function () {//watch方法是监听出错马上会报的（gulp好像也能做到在浏览器自动刷新像webpark一样，不过好像比较麻烦要在chrome上装插件liveReload还要在html代码上加东西）
    gulp.watch('src/pages/**/*.scss', ['cssmin']);
    gulp.watch('src/templates/**/*.html', ['tmod']);
});
gulp.task('default', ['clean','tmod'], function () {
    var tasks = uglifies.concat('cssmin');
    gulp.start(tasks);//这里就是说默认任务要执行uglifies数组里的所以任务还有上面的['clean','tmod']
});

// 建立js任务，进行代码检查
gulp.task('js', function(){
  gulp.src('./js/**/*.js')  // 检查文件：js目录下所有的js文件
        .pipe(jshint())       // 进行检查
        .pipe(jshint.reporter('default'))  // 对代码进行报错提示
});

下面贴一个我们使用sass和cssmin一起的例子
gulp.task('sass', function () {
return gulp.src('src/pages/**/*.scss')//pages下的所以文件目录的
.pipe(sass())
.pipe(px2rem({
baseDpr: 2, // base device pixel ratio (default: 2)
threeVersion: true, // whether to generate 3x version (default: true)
remVersion: true, // whether to generate rem version (default: true)
remUnit: 75, // rem unit value (default: 64)
remPrecision: 6 // rem precision (default: 6)
}))
.pipe(gulp.dest('build/'));//这个里面会出现src里面放得scss生成对应的css目录结构和src里**/*.scss一样(*是所有的，而它目录结构会保留)
});
gulp.task('cssmin', ['sass'], function () {//依赖sass，先执行完sass
return gulp.src('build/**/*.debug.css')//然后在编译好的css里的文件进行压缩
.pipe(cssmin())
.pipe(rename(function (path) {
path.basename = path.basename.replace('.debug', '');//压缩过后的文件名去掉debug
}))
.pipe(gulp.dest('build/'));
});

　　

　　

参考了几个文章但是好像相同的太多了百度谷歌就好，就不贴参考文章地址了！

另外对于个别插件用法不会的可以在github上面找到啊，写得很清楚用法！比如：https://github.com/hparra/gulp-rename

 

记录个经常忘记的

问题解析：

git本地新建一个分支后，必须要做远程分支关联。如果没有关联， git 会在下面的操作中提示你显示的添加关联。关联目的是如果在本地分支下操作： git pull, git push ，不需要指定在命令行指定远程的分支． 推送到远程分支后， 你只要没有显示指定， git pull 的时候，就会提示你。

解决方法：

 使用命令git branch --set-upstream ;实例如下，其中debug为创建的分支

git branch --set-upstream debug origin/debug

命令的最终修改都是针对 config 文件。

使用－－ set-upstream 去跟踪远程分支。  

 

 

 

新建分支

1.创建本地分支

git branch 分支名，例如：git branch 2.0.1.20120806

注：2.0.1.20120806是分支名称，可以随便定义。

 

2.切换本地分支

git checkout 分支名，例如从master切换到分支：git checkout 2.0.1.20120806

 

3.远程分支就是本地分支push到服务器上。比如master就是一个最典型的远程分支（默认）。

git push origin 2.0.1.20120806

 

4.远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字。

git checkout --track origin/2.0.1.20120806

注意该命令由于带有--track参数，所以要求git1.6.4以上！这样git会自动切换到分支。

 

5.提交分支数据到远程服务器

git push origin <local_branch_name>:<remote_branch_name>

例如：

git push origin 2.0.1.20120806:2.0.1.20120806

一般当前如果不在该分支时，使用这种方式提交。如果当前在 2.0.1.20120806 分支下，也可以直接提交

git push

 

6.删除远程分支

git push origin :develop

 

7.合并分支

dev分支的工作完成，我们就可以切换回master分支：

 git checkout master

把dev分支的工作成果合并到master分支上：

git merge dev