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.创建本地分支
dev
分支的工作完成,我们就可以切换回master
分支: git checkout master
把dev
分支的工作成果合并到master
分支上:
git merge dev