gulp自动化构建项目过程

Posted 2021-04-08 js前端媛

gulp自动化构建项目过程

1.css压缩 　　gulp-clean-css

2.js压缩　　　gulp-uglify

3.js合并　　　gulp-concat

gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件;异步任务支持；
压缩 js 代码可降低 js 文件大小，提高页面打开速度;gulp通过代码指令即可压缩
gulp是基于nodejs的自动任务运行器，
她能自动地完成 文件的测试，检查，合并，压缩，格式化，浏览器自动刷新，部署文件生成，并监听文件在改动后重复指定的这些步骤

安装完node以后，npm自动安装成功；
npm init初始化一个package.json文件
mkdir testgulp
cd testgulp
npm install -g gulp//全局安装gulp，-g表示在全局环境安装，以便任何项目都能使用它
npm install —-save-dev gulp //—-save-dev 来更新package.json文件,
更新 devDependencies 值，以表明项目需要依赖gulp。
Dependencies 可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依赖关系

创建gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');   (获取 uglify 模块（用于压缩 JS))
.pipe(uglify())      (压缩 js 文件)
gulp.task('script', function() {        =======================(创建压缩任务)
    gulp.src('js/myapp.js')// 1. 找到目标压缩文件位置
    .pipe(uglify())      // 2. 压缩文件
    .pipe(gulp.dest('dist/js/myjavascript')) // 3. 另存压缩后的文件，如果该文件夹不存在，将会自动创建它，执行gulp script命令后将可在根目录下看到dist／js/myjavascript文件夹并且有压缩后的myapp.js
});
在命令行使用gulp script启动此任务

关于gulpfile.js用法的注释

1.gulp.task(taskname, function(){taskContent}) 
2.gulp.src(filepath) 
3.gulp.dest(filepath)
4.gulp.pipe() //管道,pipe可理解为将操作加入执行队列
5.gulp的watch用法(监视文件，并且可以在文件发生改动时候做一些事情)
------eg:gulp.watch('js/myapp.js',['script'])//监测myapp.js，譬如改动就执行任务script
注意：gulp.src('js/＊.js')   ---------  (*表示所有的意思，这样一来就可以同时压缩多个js文件)
6.gulp的task（auto）功能  -----------(在命令行输入 gulp auto，自动监听 js/*.js 文件的修改后压缩js)
--------eg: gulp.task('auto',function(){
    gulp.watch('js/myapp.js',['script'])
})
7.使用 gulp.task('default', fn) 定义默认任务
gulp.task('default', ['script', 'auto']);
8.gulp task之runSequence
--------任务的顺序用runSequence来组织，把可以并行的的任务放在一个数组里面， 数组之间是串行的 
runSequence = require('run-sequence')
runSequence(['clean'], ['copy-to-one-folder'], ['publish'], callback);

(备注： 加形参callback彻底变成串行)

关于task(任务)之间的相互依赖

定义一个所依赖的 task 必须在这个 task 执行之前完成

var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('script', function() {
    gulp.src('js/myapp.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/myjavascript'))
});
gulp.task('config',function(){
        gulp.src('config.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
})
gulp.task('auto',function(){
    gulp.watch('js/myapp.js',['script'])
})
gulp.task('default',['script','auto'])

gulpfile 的 task 依赖树

//gulp-rename 然后 pipe 到 dest 两次来实现
var gulp = require('gulp');
var rename=require('gulp-rename');
var DEST="build/";
var uglify = require('gulp-uglify');
gulp.task('script', function() {
    gulp.src('js/myapp.js')
    .pipe(gulp.dest(DEST))
        .pipe(uglify())
        .pipe(rename({extname:'.min.js'}))
        .pipe(gulp.dest(DEST))
});

使用Gulp实现自动监测页面刷新

Gulp-connect;通过watch任务和livereload设置实现自动刷新的：npm install -g gulp-connect  
// 实时更新浏览器界面
gulp.task('watch', function () {  
    gulp.watch(['views/main.html'], ['html']);  
});  
//使用connect启动一个Web服务器 
var
livereload = require('gulp-livereload'), 
connect = require('gulp-connect');
gulp.task('connect', function () {  
    connect.server({  
        livereload: true  
    });  
});  
gulp.task('html', function () {  
    gulp.src('views/main.html')  
        .pipe(connect.reload());  
});  
gulp.task('auto',function(){
    gulp.watch('js/*/*.js',['script']);
    gulp.watch(['views/main.html'], ['html']);
    gulp.watch('css/*.css',['css'])
})
gulp.task('default',['webserver','connect','auto','script','css'])


var gulp = require('gulp'),
livereload = require('gulp-livereload'), 
gulp.task('watch', function () {  
    livereload.listen();
    gulp.watch(['src/main/webapp/ejtapp/**/*.*'],function(event){
            livereload.changed(event.path);  
    });  
});

使用Gulp实现执行gulp命令即自动加载打开页面

var webserver = require('gulp-webserver'),
//需要执行npm install gulp-webserver命令
gulp.task('webserver', function() {
  gulp.src( '.' ) // 服务器目录（.代表根目录）
  .pipe(webserver({ // 运行gulp-webserver
    livereload: true, // 启用LiveReload
    open: true // 服务器启动时自动打开网页
  }));
});

把需要发布的从多处汇总到一个目录dist/src

把需要发布的从多处汇总到一个目录dist/src
gulp.task("copy-to-one-folder", function(){
gulp.src(["c:/labs3/TestLab/NodeServer/routes/**/*"], {base: "c:/labs3/TestLab/"})
.pipe(gulp.dest('dist/src'));

return gulp.src(["c:/labs3/TestLab/HomeFinder/**/*"], {base:"c:/labs3/TestLab/HomeFinder/"})
.pipe(gulp.dest('dist/src'));
});

关于gulp如何将本地项目自动打包部署至远程服务器

var gulp = require('gulp'),
sftp=require('gulp-sftp'),//gulp自动远程上传至服务器
gulp.task('autosftp',function(){
  return gulp.src('release/**')
  .pipe(sftp({
        host:'182.92.102.97',
        port:'9393',
        remotePath:'./testejtfront',
        user:'root',
        password:'Zxxydy123'
  }))
})
gulp.task('default',['webserver','jshint','copy-to-one-folder','test','publish','connect','auto','script','autosftp'])

参考链接：http://wiki.jikexueyuan.com/project/gulp-book/

http://www.gulpjs.com.cn/docs/

http://www.tuicool.com/articles/nAzquyE

http://www.tuicool.com/articles/IZR3AfV

http://www.cnblogs.com/GameEngine/p/5229576.html