首页 > 代码库 > gulp完全开发指南 => 快来换掉你的Grunt吧
gulp完全开发指南 => 快来换掉你的Grunt吧
最近一直在构建Angular应用,通过bower管理前端包依赖,然后通过gulp和它配合.发现gulp相比于grunt真的很轻,现在我的项目中已经取代了grunt.这里把我的一些实践贴记录下来和大家分享一下.
gulp定位和grunt一样也是前端构建工具,和grunt相比它更突出一个流的概念,它所有的任务执行都是one by one的感觉,官网的自定义就是:
gulp‘s use of streams and code-over-configuration makes for a simpler and more intuitive build.
首先我感觉它重量级较grunt轻了很多,上手相对简单,同时处理上也能满足我们的需求.这里通过一个真实项目的配置文件说明一下该怎么用gulp.
npm install -g gulp
局部安装在你的项目
npm install --save-dev gulp
两种安装方式随意,没什么好说的.
(2) 运行
在目录下创建一个"gulpfile.js"文件,通过gulp命令运行即可.
(3) gulpfile.js文件
这是一个完整的例子,已经运用在我项目中,已经加了注释,看完整个文件你对于gulp应该就已经了解并可以使用了.
var gulp = require(‘gulp‘);// 引入组件var less = require(‘gulp-less‘), // less minifycss = require(‘gulp-minify-css‘), // CSS压缩 uglify = require(‘gulp-uglify‘), // js压缩 concat = require(‘gulp-concat‘), // 合并文件 rename = require(‘gulp-rename‘), // 重命名 clean = require(‘gulp-clean‘); //清空文件夹// less解析gulp.task(‘build-less‘, function(){ gulp.src(‘./javis/static/less/lib/s-production.less‘) .pipe(less()) .pipe(gulp.dest(‘./javis/static/build/css/lib/‘)) gulp.src(‘./javis/static/less/lib/s-skins.less‘) .pipe(less()) .pipe(gulp.dest(‘./javis/static/build/css/lib/‘)) gulp.src(‘./javis/static/less/lib/s/s.less‘) .pipe(less()) .pipe(gulp.dest(‘./javis/static/build/css/lib/‘)) gulp.src(‘./javis/static/less/*.less‘) .pipe(less()) .pipe(gulp.dest(‘./javis/static/build/css/‘))});// 合并、压缩、重命名cssgulp.task(‘stylesheets‘,[‘build-less‘], function() { // 注意这里通过数组的方式写入两个地址,仔细看第一个地址是css目录下的全部css文件,第二个地址是css目录下的areaMap.css文件,但是它前面加了!,这个和.gitignore的写法类似,就是排除掉这个文件. gulp.src([‘./javis/static/build/css/*.css‘,‘!./javis/static/build/css/areaMap.css‘]) .pipe(concat(‘all.css‘)) .pipe(gulp.dest(‘./javis/static/build/css/‘)) .pipe(rename({ suffix: ‘.min‘ })) .pipe(minifycss()) .pipe(gulp.dest(‘./javis/static/build/css‘));});// 合并,压缩js文件gulp.task(‘javascripts‘, function() { gulp.src(‘./javis/static/js/*.js‘) .pipe(concat(‘all.js‘)) .pipe(gulp.dest(‘./javis/static/build/js‘)) .pipe(rename({ suffix: ‘.min‘ })) .pipe(uglify()) .pipe(gulp.dest(‘./javis/static/build/js‘));});// 清空图片、样式、jsgulp.task(‘clean‘, function() { return gulp.src([‘./javis/static/build/css/all.css‘,‘./javis/static/build/css/all.min.css‘], {read: false}) .pipe(clean({force: true}));});// 将bower的库文件对应到指定位置gulp.task(‘buildlib‘,function(){ gulp.src(‘./bower_components/angular/angular.min.js‘) .pipe(gulp.dest(‘./javis/static/build/js/‘)) gulp.src(‘./bower_components/angular/angular.js‘) .pipe(gulp.dest(‘./javis/static/build/js/‘)) gulp.src(‘./bower_components/bootstrap/dist/js/bootstrap.min.js‘) .pipe(gulp.dest(‘./javis/static/build/js/‘)) gulp.src(‘./bower_components/jquery/dist/jquery.min.js‘) .pipe(gulp.dest(‘./javis/static/build/js/‘)) gulp.src(‘./bower_components/angular-route/angular-route.min.js‘) .pipe(gulp.dest(‘./javis/static/build/js/‘)) gulp.src(‘./bower_components/angular-animate/angular-animate.min.js‘) .pipe(gulp.dest(‘./javis/static/build/js/‘)) gulp.src(‘./bower_components/angular-bootstrap/ui-bootstrap.min.js‘) .pipe(gulp.dest(‘./javis/static/build/js/‘)) gulp.src(‘./bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js‘) .pipe(gulp.dest(‘./javis/static/build/js/‘)) //--------------------------css------------------------------------- gulp.src(‘./javis/static/less/fonts/*‘) .pipe(gulp.dest(‘./javis/static/build/css/fonts/‘)) gulp.src(‘./bower_components/bootstrap/fonts/*‘) .pipe(gulp.dest(‘./javis/static/build/css/fonts/‘)) gulp.src(‘./bower_components/bootstrap/dist/css/bootstrap.min.css‘) .pipe(gulp.dest(‘./javis/static/build/css/lib‘))});// 定义develop任务在日常开发中使用gulp.task(‘develop‘,function(){ gulp.run(‘buildlib‘,‘build-less‘,‘javascripts‘,‘stylesheets‘); gulp.watch(‘./javis/static/less/*.less‘, [‘build-less‘]);});// 定义一个prod任务作为发布或者运行时使用gulp.task(‘prod‘,function(){ gulp.run(‘buildlib‘,‘build-less‘,‘stylesheets‘,‘javascripts‘); // 监听.less文件,一旦有变化,立刻调用build-less任务执行 gulp.watch(‘./javis/static/less/*.less‘, [‘build-less‘]);});// gulp命令默认启动的就是default认为,这里将clean任务作为依赖,也就是先执行一次clean任务,流程再继续.gulp.task(‘default‘,[‘clean‘], function() { gulp.run(‘develop‘);});
个人感觉如果使用过grunt那么看这个完全没难度,即使什么都没用过也大概能知道是什么意思.
上面通过gulp实现了less解析,js和css文件的合并,压缩,重命名,以及文件监听,清理等.注意一下上面require进来的插件需要你自己手动npm安装一下,具体的插件都有哪些以及对应安装可以看一下官网的plugin板块,很简单也很详细.这里仅列出一些常用的.
gulp-ruby-sass : 支持sass
gulp-minify-css : 压缩css
gulp-jshint : 检查js
gulp-uglify : 压缩js
gulp-concat : 合并文件
gulp-rename : 重命名文件
gulp-htmlmin : 压缩html
gulp-clean : 清空文件夹
最后附上官网: http://gulpjs.com/
如果发现任何问题,欢迎留言给我.
http://www.tuicool.com/articles/J3QnEb
gulp完全开发指南 => 快来换掉你的Grunt吧