刚接触node.js,对前端的一些东西还不是很清楚,据说Gulp这东西很强大,先来看看从网上抄的一段关于自动化构建的描述:

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

后续:

经过本人最近一段时间的尝试和探索,发现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再试)相信里面的注释已经比较清楚了。

 'use strict';
var gulp=require('gulp');//引用类库,相当于.net中的using
var plugins = {
del: require('del'),
runSequence: require('run-sequence'),
jade: require('gulp-jade'),
concat: require('gulp-concat'),
uglify: require('gulp-uglify'),
rename:require('gulp-rename')
};
var jade = plugins.jade;
var concat = plugins.concat;
gulp.task('default', function (callback) {//default是入口
plugins.runSequence(
'task-clean',
['task-script'],
'task-jade',
callback
);
});
gulp.task('task-clean', function (callback) {
plugins.del(['./dist/*.*'],callback());//清理dist文件夹中原来的东西
});
gulp.task('task-script', function () {
gulp.src('public/javascripts/*.js', { base:'public'})
.pipe(plugins.uglify())//js压缩
.pipe(plugins.rename({extname:'.min.js'}))//重命名
.pipe(gulp.dest('dist'));//输出到dist目录
});
var watcher= gulp.watch('public/javascripts/*.js', ['task-script']);//监控这个文件夹,有变化了运行task-script task
watcher.on('change', function (e) {
console.log('File ' + e.path + ' was ' + e.type + ', running tasks...');//变化了之后控制台打印一下,方便调试
});

===========后续,文件更改自动刷新浏览器=====================

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

 //构建Gulp Task,用来启动一个mini Server,Host你的网站
gulp.task('browser-sync', function () {
plugins.browserSync.init({
server: {
baseDir: './dist'
},
port: 8888
})
});
//gulp task:刷新浏览器
gulp.task('bs-reload', function () {
plugins.browserSync.reload();
console.log("模块重新构建成功".green);
});
var watcher = gulp.watch(
['public/javascripts/*.js','index.html'],
['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. 参数化构建,把一些东西写到配置里面,优化一把

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 browserSync=require('browser-sync').create();
var appConfig={
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})
.pipe(gulp.dest(appConfig.dist));
});
gulp.task('theme',function(){
gulp.src(watchPath.theme,{base:appConfig.appPath})
.pipe(gulp.dest(appConfig.dist));
});
gulp.task('views',['bower'],function(){
gulp.src([watchPath.views,watchPath.main],{base:appConfig.appPath})
.pipe(gulp.dest(appConfig.dist));
console.log('Html bulid complete'.green);
});
gulp.task("main-bower-files", function(){
return gulp.src(mainBowerFiles(), { base: appConfig.appPath })
.pipe(gulp.dest(appConfig.dist));
});
gulp.task('images',function(){
gulp.src(watchPath.images,{base:appConfig.appPath})
.pipe(gulp.dest(appConfig.dist));
});
gulp.task('reload', function () {
browserSync.reload();
console.log("模块重新构建成功".green);
}); gulp.task('serve', ['clean','views','theme','images', 'js','styles', 'scripts','main-bower-files'], function() {
console.log('Build Complate!Server Strarting......');
browserSync.init({
server: {
baseDir: './dist'
},
port: 8888
})
}); gulp.task('default', ['serve']);

【Node.js学习笔记】使用Gulp项目自动化构建工具的更多相关文章

  1. 一点感悟:《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  2. Node.js学习笔记(3):NPM简明教程

    Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...

  3. Node.js学习笔记(1):Node.js快速开始

    Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...

  4. Node.js学习笔记(4):Yarn简明教程

    Node.js学习笔记(4):Yarn简明教程. 引入Yarn NPM是常用的包管理工具,现在我们引入是新一代的包管理工具Yarn.其具有快速.安全.可靠的特点. 安装方式 使用npm工具安装yarn ...

  5. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

  6. Node.js学习笔记(2):基本模块

    Node.js学习笔记(2):基本模块 模块 引入模块 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...

  7. 前端项目自动化构建工具——Webpack入门教程

    参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置 ...

  8. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

  9. gulp前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...

随机推荐

  1. Android - 内存泄漏的情况以及解决方法

    [译]Android内存泄漏的八种可能(上) Android防止内存泄漏的八种方法(下). Static Activities 在类中定义了静态Activity变量,把当前运行的Activity实例赋 ...

  2. 配置zookeeper集群

    创建3台服务,不同ip,相同端口 1.先安装jdk1.8 解压: tar -zxvf jdk-8u11-linux-x64.tar.gz 重新命名文件夹名字: mv jdk1..0_11/ jdk8 ...

  3. mysql索引是什么?索引结构和使用详解

    索引是什么 mysql索引: 是一种帮助mysql高效的获取数据的数据结构,这些数据结构以某种方式引用数据,这种结构就是索引.可简单理解为排好序的快速查找数据结构.如果要查“mysql”这个单词,我们 ...

  4. 02_dubbo的SPI

    [dubbo为什么不采用JDK自带的SPI] 1.JDK自带的SPI(ServiceLoader)会一次性实例化扩展点所有实现,基本只能通过遍历全部获取,也就是接口的实现类全部加载并实例化一遍,如果我 ...

  5. 01_Jdk自带SPI

    [SPI的设计目标] 面向对象的设计里,模块之间是基于接口编程,模块之间不对实现类进行硬编码. 一旦代码里设计具体的实现类,就违法了可插拔的原则,如果需要替代一种实现,就要修改代码. 为了实现在模块装 ...

  6. 30_AQS

    [参考文章] https://www.jianshu.com/p/df0d7d6571de http://ifeve.com/introduce-abstractqueuedsynchronizer/ ...

  7. Android学习——Service(二)

    今天来介绍Service的第二种使用方式,Bind方式 Bind方式启动服务 Bind方式和Start方式启动很类似,都是通过Intent来启动,不同的是,Bind方式需要传入三个参数,如下: Int ...

  8. ajax post data 获取不到数据,注意content-type的设置post/get

    因为之前一直用jQuery ajax get的方式传递参数, 默认没有设置过 contentType 的值. $.ajax({ url: "/yuanjin/jianxiang", ...

  9. DevExpress之ChartControl用法

    DevExpress中的ChartControl顾名思义就是数据基于图表展示,其关键在于Series上的处理. using System; using System.Drawing; using De ...

  10. Elasticsearch 架构原理

    为什么要学习架构? Elasticsearch的一些架构设计,对我们做性能调优.故障处理,具有非常重要的影响.下面将从Elasticsearch的准实时索引的实现.自动发现.rounting和repl ...