http://reeoo.me/archives/gulpjs.html
再来看
gulp的，gulp需要一个gulpfile.js文件，我目前项目中的是这个样子：var gulp = require('gulp'),//gulp基础库 concat = require('gulp-concat'),//合并文件 cssmin = require('gulp-minify-css'),//压缩css htmlmin = require("gulp-htmlmin"),//压缩html jsmin = require('gulp-uglify'),//压缩js rename = require('gulp-rename'),//重命名文件 clean = require("gulp-clean"),//清理目录 replace = require('gulp-replace'),//文本替换 processhtml = require('gulp-processhtml'),//处理html文件 addsrc = require('gulp-add-src'),//添加额外的文件流 option = { buildPath: "../dist"//构建目录 }; //构建目录清理 gulp.task("clean", function (done) { //return cache.clearAll(done); return gulp.src(option.buildPath, { read: false }) .pipe(clean({force: true})); }) gulp.task("imgcopy", function () {//图片拷贝 gulp.src("../img/**/*") .pipe(gulp.dest(option.buildPath + '/img/')) }) //js文件压缩 gulp.task('jsmin', function () { gulp.src(["../js/**/**/*.js",'!../js/libs/*.js']) .pipe(jsmin()) .pipe(gulp.dest(option.buildPath+ "/js/")) }); //需要合并和压缩的文件 gulp.task('concat', function () { gulp.src(['../js/libs/angular.min.js','../js/libs/*.js', '!../js/libs/bridge*.js']) .pipe(concat('libs.min.js')) .pipe(jsmin()) .pipe(addsrc('../js/libs/bridge*.js')) .pipe(jsmin()) .pipe(gulp.dest(option.buildPath + "/js/libs/")) }); gulp.task("processhtml", function () { var date = new Date().getTime(); gulp.src('../main.html') .pipe(replace(/_VERSION_/gi, date)) .pipe(processhtml()) .pipe(htmlmin({ collapseWhitespace: true })) .pipe(gulp.dest(option.buildPath + '/')) }) //压缩css gulp.task("cssmin", function () { gulp.src("../style/*.css") .pipe(cssmin()) .pipe(gulp.dest(option.buildPath + '/style')) }) //压缩html文件 gulp.task("htmlmin", function () { gulp.src('../views/**/*.html') .pipe(htmlmin({ collapseWhitespace: true })) .pipe(gulp.dest(option.buildPath + '/views')) }) // 默认任务 清空图片、样式、js并重建 运行语句 gulp gulp.task('default', ['clean'], function () { gulp.start('jsmin', 'cssmin', 'processhtml', "htmlmin", 'imgcopy', 'concat'); });
gulp快速上手
- 首先确保你已经正确安装了
nodejs环境。然后以全局方式安装gulp：1$ npm install -g gulp - 全局安装
gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：1$ npm install gulp如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：1$ npm install --save-dev gulp - 在项目根目录创建gulpfile.js文件
1 2 3 4 5
var gulp = require('gulp'); gulp.task('default', function() { console.log('hello world'); });
- 运行gulp
1$ gulp默认任务将被运行，向控制台输出hello world。
如果需要运行单个任务, 使用gulp taskname命令。
使用
gulp，仅需知道4个API即可：gulp.task(),gulp.src(),gulp.dest(),gulp.watch()，所以很容易就能掌握。gulp.src(['js/*.js','css/*.css','*.html'])
|
gulp.dest()方法是用来写文件的，path为写入文件的路径gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。gulp.task('uglify',function(){ //do something }); gulp.task('reload',function(){ //do something }); gulp.watch('js/**/*.js', ['uglify','reload']);
gulp.watch('js/**/*.js', function(event){ console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变 console.log(event.path); //变化的文件的路径 });
var gulp = require('gulp'), rename = require('gulp-rename'), uglify = require("gulp-uglify"); gulp.task('rename', function () { gulp.src('js/jquery.js') .pipe(uglify()) //压缩 .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js .pipe(gulp.dest('js')); });
var gulp = require('gulp'), concat = require("gulp-concat"); gulp.task('concat', function () { gulp.src('js/*.js') //要合并的文件 .pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js" .pipe(gulp.dest('dist/js')); });
gulp.task("replace", function () { var date = new Date().getTime(); gulp.src('../main.html') .pipe(replace(/_VERSION_/gi, date)) .pipe(gulp.dest(option.buildPath + '/')) })
