Node.js从入门到精通如何使用Gulp项目自动化构建工具-职坐标

Node.js从入门到精通如何使用Gulp项目自动化构建工具

沉沙 2018-07-26 来源：阅读 1343 评论 0

摘要：本篇Node.js教程探讨了如何使用Gulp项目自动化构建工具，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

本篇Node.js教程探讨了如何使用Gulp项目自动化构建工具，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。　

在为数众多的中小型软件作坊中，不存在自动化构建和发布工具。构建、交付准备环境、代码发布全由手工完成，同样还有运行测试、备份旧版本、新版本打标签以及许多其他重复的事情。毕竟你可能认为这全是非常简单的工作，集成开发环境通过按钮或快捷键就可构建项目，你开启两个窗口拖放少许文件或文件夹即可完成网站发布。但当你在维护代码库和应用时所有这些事情加在一起，这里几分钟，那里几分钟，最终会浪费几个小时。

Gulp的作用如下：

1.重构正式运行的文件夹目录结构，因为有时候在开发时候的最优选择未必是发布时候的最优目录结构。

2.自动压缩CSS/JS

3.配合Browser-Sync这类的浏览器自动工具，还有一些测试工具，从而实现真正的自动化测试。

本人尝试Gulp的过程如下：

所用IDE:VS 2012 并安装node.js tools插件

1.新建一个Node.Js express 4项目，会给新建一个welcome的node.js程序。

2.通过npm引用相关包，我用到的包有：

gulp、del、run-sequence、gulp-jade、gulp-concat、gulp-uglify、gulp-rename

3.在原来新建好的welcome的项目基础上，我再public/javascripts下面新建了个js文件，叫test.js，内容随便写几行js。

4.根目录下新建个gulpfile.js，然后在cmd中cd到网站根目录下，或者直接右键点击项目，选择open command xxxx，然后敲个gulp（如果报错，先全局安装gulp再试）相信里面的注释已经比较清楚了。

1 'use strict'; 2 var gulp=require('gulp');//引用类库，相当于.net中的using 3 var plugins = { 4 del: require('del'), 5 runSequence: require('run-sequence'), 6 jade: require('gulp-jade'), 7 concat: require('gulp-concat'), 8 uglify: require('gulp-uglify'), 9 rename:require('gulp-rename') 10 };11 var jade = plugins.jade;12 var concat = plugins.concat;13 gulp.task('default', function (callback) {//default是入口14 plugins.runSequence(15 'task-clean',16 ['task-script'], 17 'task-jade',18 callback19 );20 });21 gulp.task('task-clean', function (callback) { 22 plugins.del(['./dist/*.*'],callback());//清理dist文件夹中原来的东西23 });24 gulp.task('task-script', function () {25 gulp.src('public/javascripts/*.js', { base:'public'})26 .pipe(plugins.uglify())//js压缩27 .pipe(plugins.rename({extname:'.min.js'}))//重命名28 .pipe(gulp.dest('dist'));//输出到dist目录29 });30 var watcher= gulp.watch('public/javascripts/*.js', ['task-script']);//监控这个文件夹，有变化了运行task-script task31 watcher.on('change', function (e) {32 console.log('File ' + e.path + ' was ' + e.type + ', running tasks...');//变化了之后控制台打印一下，方便调试33 });

5.既然文件都变了，那肯定要重置当前的浏览器状态，让他自己来刷新，免得我们每次都得手动去做这件事情，这时候我们就需要引入Browser-Sync，直接贴代码比较清晰一点

1 //构建Gulp Task，用来启动一个mini Server，Host你的网站 2 gulp.task('browser-sync', function () { 3 plugins.browserSync.init({ 4 server: { 5 baseDir: './dist' 6 }, 7 port: 8888 8 }) 9 });10 //gulp task：刷新浏览器11 gulp.task('bs-reload', function () {12 plugins.browserSync.reload();13 console.log("模块重新构建成功".green);14 });15 var watcher = gulp.watch(16 ['public/javascripts/*.js','index.html'],17 ['task-script', 'task-index', 'bs-reload']);//监控这个文件夹，有变化了运行task,最后刷浏览器

6.JS/CSS加上时间戳，防止因为浏览器缓存造成的各种操蛋的问题。

//在构建Html的时候，去给Html中的引用加上版本号，而不是在构建JS的时候，我犯过这错误

gulp.task('task-index', function () {

var version = (new Date).valueOf() + '';

gulp.src('index.html')

.pipe(plugins.replace('.js"></script>', '.min.js?v=' + version + '"></script>'))

.pipe(gulp.dest('dist'));

console.log('task-index 构建成功'.green);

});

7. 参数化构建，把一些东西写到配置里面，优化一把

appPath:require("./browser.json").appPath||'src', //配置源文件路径

dist:'dist',//配置打包路径

isDebug:true//配置编译方式};var assets= appConfig.appPath+'/assets/';var watchPath={

scripts:[assets+'scripts/**/*.js'],

styles:[assets+'styles/**/*.css'],

plugins:[assets+'plugins/**/*.*'],

images:[assets+'images/**/*.*']

};

gulp.task('main',function(){

runSequence();

});

gulp.task('clean',function(callback){

del([appConfig.dist+'/*.*'],callback);

});

gulp.task('scripts',function(){

var gulpStream=gulp.src(watchPath.scripts,{base:appConfig.appPath});

if(appConfig.isDebug){

gulpStream=gulpStream.pipe(uglify());

}

return gulpStream.pipe(gulp.dest(appConfig.dist));

console.log('scripts bulid complete'.green);

});

8.Bower自动添加引用到首页。

gulp.task('bower', function () {

return gulp.src([paths.views.main])

.pipe(wiredep({

directory: 'bower_components',

//exclude: [],

//ignorePath: '/^(\.\.\/)*\.\./'

ignorePath: '..'

}))

.pipe(gulp.dest('app'));

});

9.模块化构建项目，自动刷新浏览器

var gulp=require('gulp');var del=require('del');var runSequence=require('run-sequence');var concat=require('gulp-concat');var uglify=require('gulp-uglify');var rename=require('gulp-rename');var colors=require('colors');var cssnano = require('gulp-cssnano');var browserSync=require('browser-sync').create();var wiredep=require("wiredep").stream;var mainBowerFiles = require('main-bower-files');var appConfig={

appPath:require("./bower.json").appPath||'src', //配置源文件路径

dist:'dist/',//配置打包路径

isDebug:true//配置编译方式};var assets= appConfig.appPath+'/assets';var bowerPath=assets+"/plugins";var watchPath={

scripts:[assets+'/scripts/**/*.js'],

styles:[assets+'/styles/**/*.css'],

plugins:[assets+'/plugins/**/*.*'],

images:[assets+'/images/**/*.*'],

main:appConfig.appPath+'/index.html',

views:appConfig.appPath+'/views/**/*.html',

js:appConfig.appPath+'/js/**/*.js',

theme:appConfig.appPath+'/theme/**/*.html'

};

gulp.watch(watchPath.scripts,['scripts','reload']);

gulp.watch(watchPath.styles,['styles','reload']);

gulp.watch(watchPath.plugins,['plugins','reload']);

gulp.watch(watchPath.images,['images','reload']);

gulp.watch('./bower.json',['bower','main-bower-files','reload']);

gulp.watch([watchPath.views,watchPath.main],['views','reload']);

gulp.watch(watchPath.js,['js','reload']);

gulp.watch(watchPath.theme,['theme','reload']);

gulp.task('clean',function(){

del([appConfig.dist+'/*.*']);

console.log('clean task complete!'.green);

});

gulp.task('scripts',function(){

var gulpStream=gulp.src(watchPath.scripts,{base:appConfig.appPath});

if(!appConfig.isDebug){

gulpStream=gulpStream.pipe(uglify());

}

console.log('scripts bulid complete'.green);

return gulpStream.pipe(gulp.dest(appConfig.dist));

});

gulp.task('styles',function(){

var gulpStream=gulp.src(watchPath.styles,{base:appConfig.appPath});

if(!appConfig.isDebug){

gulpStream=gulpStream.pipe(cssnano());

}

console.log('styles bulid complete'.green);

return gulpStream.pipe(gulp.dest(appConfig.dist));

});

gulp.task('bower', function () {

return gulp.src([watchPath.main])

.pipe(wiredep({

directory: bowerPath,

//exclude: [],

//ignorePath: '/^(\.\.\/)*\.\./' }))

.pipe(gulp.dest(appConfig.appPath));

});

gulp.task('js',function(){

gulp.src(watchPath.js,{base:appConfig.appPath})