gulp 使用介绍
- gulp
- gulp 插件
- gulp的配置文件gulpfile.js
- gulp 语法
- gulp 实例
- gulp的缺点
gulp
gulp是基于Node.js的前端自动化构建工具,主要用于代码打包。目前主流的前端打包工具,grunt,gulp,webpack。grunt现在似乎慢慢被gulp取代,而我使用gulp也是冲着大家说的配置简单去的,至于通道流,运行文件什么的其实还是次要的;webpack现在很火,听说功能强大,没有用过。
npm install gulp -g
注意需要在npm全局中安装gulp,否则命令窗口中找不到gulp快捷命令,记得检查环境变量的配置情况。
gulp 插件
gulp的使用离不开gulp插件的使用,下面是常用的几款。
npm install del gulp gulp-concat gulp-minify-css gulp-replace gulp-uglify gulp-rev gulp-rev-collector --save-dev
- del 和 gulp-clean
del是node.js的插件,两者的效果相似,都是用来清除文件。至于为什么使用 del,而不是 gulp-clean,我是看到网上一篇文章推荐的。
- gulp-concat
gulp-concat用来做文件合并,可以将多个文件合并成一个文件,减少静态资源数量。
- gulp-minify-css
gulp-minify-css是css的压缩工具。
- gulp-uglify
gulp-uglify是js的压缩工具。官方文档上是这么写的 “Minify files with UglifyJS.”
- gulp-replace
gulp-replace是一个文本修改插件,我们一般用来做文件内容的的修改,常用的是路径修改。
- gulp-rev和gulp-rev-collector
gulp-rev和gulp-rev-collector,并没有用到,这里只做标示。这两个插件可以用来处理文件名,同时生成一个json文件保存修改前的文件名和修改后的文件名,并且自动处理文件中的修改,例如图片文件至于css文件。
gulp的配置文件gulpfile.js
gulp依赖于配置文件gulpfile.js,在运行目录下需要手动创建gulpfile.js,gulp的任务执行代码会调用gulpfile.js。
gulp 语法
gulp的语法很简单,功能实现依赖于各种插件,所以学习上成本很低。gulp的语法其实就是是nodejs的语法。
- 声明依赖的插件
var gulp = require(‘gulp‘); var minifycss = require(‘gulp-minify-css‘); var concat = require(‘gulp-concat‘); var uglify = require(‘gulp-uglify‘); var del = require(‘del‘); var replace = require(‘gulp-replace‘);
- 定义任务(task)
gulp.task(‘taskName‘, function() { }); //default是默认task,当命令行缺省调用时会执行default任务。 gulp.task(‘default‘, []);
- 命令行调用任务(task)
gulp taskName // 直接调用具体的task gulp //调用默认的default,如果没用会报错
- 多个任务合并
gulp.task(‘default‘, [‘task1‘, ‘task2‘, ‘task3‘, ‘task4‘]);
- 文件拷贝语法
gulp.src(‘oldPath/images/*.*‘) .pipe(gulp.dest(newPath+‘/images‘));
- 文件合并且压缩语法
//css文件 gulp.src([‘app/assets/styles/style.css‘, ‘app/assets/styles/public.css‘, ‘app/assets/styles/page.css‘, ‘app/assets/styles/jquery-ui-1.10.3.css‘]) .pipe(concat(‘style.css‘)) .pipe(minifycss()) .pipe(gulp.dest(newPath)); //js文件 gulp.src([ ‘app/components/*/*.js‘ ]) .pipe(concat(‘components.js‘)) .pipe(uglify()) .pipe(gulp.dest(newPath));
- 文本修改
gulp.task(‘demo-replace‘, function(){ gulp.src(demoDir+‘/index.html‘) .pipe(replace(‘<link rel="stylesheet">‘, ‘‘)) //删除 .pipe(replace(/\.\.\/assets\//g, ‘‘)) //正则替换 .pipe(replace(/\.\.\/images/g, ‘images‘)) .pipe(gulp.dest(newPath));
- 目录清理
gulp.task(‘clean‘, function(cb){ del(rootPath, cb); });
gulp 实例
var gulp = require(‘gulp‘); var minifycss = require(‘gulp-minify-css‘); var concat = require(‘gulp-concat‘); var uglify = require(‘gulp-uglify‘); var del = require(‘del‘); var replace = require(‘gulp-replace‘); var root = ‘dist‘; var partnerDir = root + ‘/partners‘; gulp.task(‘partners‘, function() { gulp.src(‘app/assets/images/*.*‘) .pipe(gulp.dest(partnerDir+‘/images‘)); gulp.src([‘app/assets/styles/style.css‘, ‘app/assets/styles/public.css‘, ‘app/assets/styles/page.css‘, ‘app/assets/styles/jquery-ui-1.10.3.css‘]) .pipe(concat(‘style.css‘)) .pipe(minifycss()) .pipe(gulp.dest(partnerDir)); gulp.src([‘app/assets/js/jquery-1.11.1.min.js‘, ‘app/assets/js/jquery-ui-1.10.3.js‘, ‘app/assets/js/bootstrap.js‘, ‘app/assets/js/echarts.js‘]) .pipe(uglify()) .pipe(gulp.dest(partnerDir+‘/js‘)); gulp.src(‘app/partners/modules/*/*.html‘) .pipe(gulp.dest(partnerDir+‘/modules‘)); gulp.src([ ‘app/bower_components/angular/angular.js‘, ‘app/bower_components/angular-ui-router/release/angular-ui-router.min.js‘, ‘app/bower_components/angular-resource/angular-resource.js‘, ‘app/bower_components/angular-cookies/angular-cookies.js‘, ‘app/bower_components/angular-messages/angular-messages.min.js‘ ]) .pipe(uglify()) .pipe(gulp.dest(partnerDir+‘/bower_components‘)); gulp.src([ ‘app/components/services/*.js‘, ‘app/components/directives/*.js‘ ]) .pipe(concat(‘components.js‘)) .pipe(uglify()) .pipe(gulp.dest(partnerDir)); gulp.src([‘app/partners/modules/*/*.js‘, .pipe(concat(‘modules.js‘)) .pipe(uglify()) .pipe(gulp.dest(partnerDir)); gulp.src(‘app/partners/*.js‘) .pipe(uglify()) .pipe(gulp.dest(partnerDir)) gulp.src(‘app/partners/*.html‘) .pipe(gulp.dest(partnerDir)) }); gulp.task(‘partners-replace‘, function(){ gulp.src(partnerDir+‘/index.html‘) //styles .pipe(replace(‘<link rel="stylesheet" href="../assets/styles/public.css">‘, ‘‘)) .pipe(replace(‘<link rel="stylesheet" href="../assets/styles/jquery-ui-1.10.3.css">‘, ‘‘)) .pipe(replace(‘<link rel="stylesheet" href="../assets/styles/style.css">‘, ‘<link rel="stylesheet" href="style.css">‘)) //bower_components .pipe(replace(‘<script src="../bower_components/angular/angular.js"></script>‘, ‘<script src="bower_components/angular.js"></script>‘)) .pipe(replace(‘<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>‘, ‘<script src="bower_components/angular-ui-router.min.js"></script>‘)) .pipe(replace(‘<script src="../bower_components/angular-resource/angular-resource.js"></script>‘, ‘<script src="bower_components/angular-resource.js"></script>‘)) .pipe(replace(‘<script src="../bower_components/angular-cookies/angular-cookies.js"></script>‘, ‘<script src="bower_components/angular-cookies.js"></script>‘)) .pipe(replace(‘<script src="../bower_components/angular-messages/angular-messages.min.js"></script>‘, ‘<script src="bower_components/angular-messages.min.js"></script>‘)) //components .pipe(replace(‘...‘, ‘<script src="components.js"></script>‘)) //modules .pipe(replace(‘...‘, ‘<script src="modules.js"></script>‘)) .pipe(gulp.dest(partnerDir)); gulp.src(partnerDir+‘/*.*‘) .pipe(replace(/\.\.\/assets\//g, ‘‘)) .pipe(replace(/\.\.\/images/g, ‘images‘)) .pipe(gulp.dest(partnerDir)); gulp.src(partnerDir+‘/modules/*/*.html‘, { base: ‘modules‘ }) .pipe(replace(/\.\.\/assets\//g, ‘‘)) .pipe(replace(/\.\.\/images/g, ‘images‘)) .pipe(gulp.dest(‘modules‘)); }) gulp.task(‘clean‘, function(cb){ del(root, cb); }); gulp.task(‘replace‘,[ ‘partners-replace‘]); gulp.task(‘default‘, [ ‘partners‘]);
gulp的缺点
- 问题很难定位,运行中间没有办法debug,console.log() 也不能很好的定位问题。
- task串行执行有问题。
时间: 2024-08-21 18:46:30