nodejs——gulp构建工具的基本使用以及实现文件的实时更新

gulp的部署

gulp是基于nodejs环境下的，所以本文默认已经部署好nodejs环境：

首先需要再用npm在全局环境下安装gulp，以方便在任何文件目录下运行gulp命令

npm install -g gulp

其次需要在项目文件中安装局部gulp，作为项目依赖

npm install gulp --save-dev

然后再项目文件夹中创建gulpfile.js文件，用来运行gulp任务

gulp的基本使用

1、需要在gulpfile.js文件中引入gulp模块以及项目插件（插件需要局部下载）

var gulp = require('gulp');
var less = require('gulp-less');//less解析
var cssmin = require('gulp-cssmin');//压缩CSS
var uglify = require('gulp-uglify');//压缩JS
var concat = require('gulp-concat');//合并js文件
var connect = require('gulp-connect');//创建本地服务器
var imagemin = require('gulp-imagemin');//压缩图片
var open = require('open');//用于打开服务器
var autoprefixer=require('gulp-autoprefixer')//自动添加浏览器前缀
var htmlmin=require('gulp-htmlmin')//压缩html文件
var gulpRev=require('gulp-rev') //给文件后添加md5时间戳(防止浏览器缓存)

2、提前整理好项目所需路径

var app = {
	srcPath:'src/',  //src 开发路径
	buildPath:'build/',  //build运行路径
	distPath:'dist/'   //dist发布路径
};

3、创建任务，把srcPath开发路径lib文件夹中的的前段框架（比如JQuery）同步到其它目录下，并实现实时更新

/*把bower下载的前端框架放到我们项目当中*/
gulp.task('lib',function () {
    gulp.src(app.srcPath +'lib/**')    //  **表示所有文件，包含子孙文件夹子下的文件
        .pipe(gulp.dest(app.buildPath+'lib'))
        .pipe(gulp.dest(app.distPath+'lib'))
        // 如果这个目录下面的东西改变了我就在浏览器里面刷新
        .pipe(connect.reload()) //当内容发生改变时， 重新加载。
});

4、创建任务，把srcPath开发路径下次的html文件同步到其他目录

/*2.定义任务 把所有html文件移动另一个位置*/
gulp.task('html',function () {
    /*要操作哪些文件 确定源文件地址*/
    gulp.src(app.srcPath+'**/*.html')  /*src下所有目录下的所有.html文件*/
        .pipe(htmlmin({collapseWhitespace: true}))//压缩html文件
        .pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目标位置
        .pipe(gulp.dest(app.distPath))
        .pipe(connect.reload()) //当内容发生改变时， 重新加载。
});

5、把开发的less文件转成css放到build目录下，以及把css文件压缩到diist目录下

gulp.task('less',function () {
    gulp.src(app.srcPath+'css/**.less')
        // .pipe(concat('index.less'))
        .pipe(less())
        .pipe(autoprefixer({
            cascade: true, 
            remove:true 
        }))
        .pipe(gulp.dest(app.buildPath+'css/'))
        /*经过压缩，放到dist目录当中*/
        .pipe(cssmin())
        .pipe(gulp.dest(app.distPath+'css/'))
        .pipe(connect.reload())
});
gulp.task('css',function(){
    gulp.src(app.srcPath+'css/**/*.css')
        .pipe(autoprefixer({
            cascade: true, 
            remove:true 
        }))
        .pipe(gulp.dest(app.buildPath+'css/'))
        .pipe(cssmin())
        .pipe(gulp.dest(app.distPath+'css/'))
        .pipe(connect.reload())
})

6、把js文件合并

/*合并js*/
gulp.task('js',function () {
    gulp.src(app.srcPath+'js/**/*.js')
        .pipe(concat('index.js'))
        .pipe(gulp.dest(app.buildPath+'js/'))
        .pipe(uglify())
        .pipe(gulp.dest(app.distPath+'js/'))
        .pipe(connect.reload())
});

7、把图片进行压缩

/*压缩图片*/
gulp.task('image',function () {
    gulp.src(app.srcPath+'images/**/*')
        .pipe(gulp.dest(app.buildPath+'images'))
        .pipe(imagemin())
        .pipe(gulp.dest(app.distPath+'images'))
        .pipe(connect.reload())
});

8、把前面的任务进行捆绑

/*同时执行多个任务 [其它任务的名称]
 * 当执行bulid时，会自动把数组当中的所有任务给执行了。
 * */
gulp.task('build',['less','html','js','image','lib']);

9、定义一个Server任务，用来监听文件是否有改变，从而实现热更新

/*定义server任务
 * 搭建一个服务器。设置运行的构建目录
 * */
gulp.task('server',['build'],function () {
    /*设置服务器*/
    connect.server({
        root:[app.buildPath],//要运行哪个目录
        livereload:true,  //是否开启热更新。
        port:9999  //端口号
    })
    /*监听哪些文件，如果文件发生改变，就执行相应的任务*/
    gulp.watch(app.srcPath + 'lib/**/*',['lib']);
    gulp.watch(app.srcPath+'**/*.html',['html']);
    gulp.watch(app.srcPath+'js/**/*.js',['js']);
    gulp.watch(app.srcPath+'images/**/*',['image']);
    gulp.watch(app.srcPath+'style/**/*.less',['less']);
    //通过浏览器把指定的地址 （http://localhost:9999）打开。
    open('http://localhost:9999');
});

10、最后创建一个默认的gulp任务，当在终端输入gulp即可运行Server任务

/*定义默认任务
 * 直接执行gulp 会调用的任务
 * */
gulp.task('default',['server']);

注意：首页默认是index.html文件，也就是说，server服务器默认打开的是index.html文件

最后

以上就是热心鼠标为你收集整理的nodejs——gulp构建工具的基本使用以及实现文件的实时更新的全部内容，希望文章能够帮你解决nodejs——gulp构建工具的基本使用以及实现文件的实时更新所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。