使用Gulp构建前端自动化解决方案

前一篇博客写了Gulp入门,这里详细的介绍一下如何用Gulp构建适合自己的前端工作流。

我在学习的时候看了挺多资料,最后在kelsen大大的博客学会了,感觉通俗易懂,一步步做过去就好了。

实际中每个人的需求不用,通过gulp以及其他相关插件进行搭配,都能够满足不同的需求,所以我最后的流程也跟上边那位kelsen大大的不太一样。我在这里会详细注释每个语句,因为在我自己学习的过程中,由于对node.js理解有限,所以时不时遇到很多困惑。希望通过我详尽的注释,能够让初次接触Gulp的同学们能够一目了然,了解他的工作原理之后,就可以很容易的按照自己的思路来搭建适合自己的前端工作流。

这里默认你已经安装好了node.js 和 gitbash。

首先在你需要的地方建立工程目录,好的目录就是工程的骨架,让结构一目了然,便于维护管理,这方面我木有经验,直接借用上边kelsen大大博客中的结构:

myproject/
├── app/
│   ├── sass/
│   │   └─ main.scss
│   ├── scripts/
│   │   └─ javascript.js
│   └── index.html
├── dist/
└── release/

初始化npm

在myproject目录下打开gitbash,执行npm init,创建一个package.json文件,这样其他人浏览工程的时候,只要看这个文件,就知道工程的各种基本信息以及依赖的模块了。
下面是我最终的package.json:

{
  "name": "daren",
  "version": "1.0.0",
  "description": "Daren Official website",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Creabine",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.14.0",
    "browsersync-ssi": "^0.2.4",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-minify": "0.0.14",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.1.0",
    "gulp-run-sequence": "^0.3.2",
    "gulp-uglify": "^2.0.0",
    "gulp-zip": "^3.2.0",
    "plumber": "^0.4.8"
  }
}

在你刚做完第一步的时候是没有devDependencies这一项的,因为你还没有安装任何依赖模块。

安装所需的模块

通过npm installpackageName –save-dev 命令来安装上边devDependencies中显示的各个依赖模块。
在安装或删除博快的时候带上–save-dev是个好习惯,他会同时改变你的package.json中的devDependencies对应的值。来保证信息的准确性。
由于墙的存在,安装模块可能会很慢或者很久不响应,国内可以使用cnpm镜像安装,但是我在使用cnpm的时候遇到了其他奇怪的麻烦(安装时莫名的多出了许多其他文件),所以这里建议直接挂个VPN好了。

构建Gulp任务

Gulp用来协调指挥其他模块的工作。首先在myproject文件夹下新建gulpfile.js文件,gulp会运行这个文件中的js,我的文件最终内容如下:

//使用严格模式的js。保证js的严谨,作为一个好习惯。
'use strict';

//使用require引入所有需要的模块,这是node.js语法,不了解的话记住就行了。
    //gulp
var gulp        = require('gulp'),
    //多浏览器多设备同步&自动刷新
    browserSync = require('browser-sync').create(),
    SSI         = require('browsersync-ssi'),
    //整合文件
    concat      = require('gulp-concat'),
    //混淆js   暂时没用到
    uglify = require('gulp-uglify'),
    //压缩js
    minify      = require('gulp-minify'),
    //错误处理插件plumber
    plumber     = require('gulp-plumber'),
    //compass 用来编译sass
    compass     = require('gulp-compass'),
    //clean 用来删除文件
    clean       = require('gulp-clean'),
    //压缩文件
    zip         = require('gulp-zip');
    //控制task中的串行和并行。这个很重要,它能够严格规定task的执行顺序,否则gulp默认并行,有些时候会产生问题。如先清空再重建文件,可能重建过程中又清空了。
    runSequence = require('gulp-run-sequence');
//上边引入模块之后,下面开始编写任务:

//创建一个名为serve的任务,该任务的内容就是匿名函数中的内容。
gulp.task('serve', function() {
    //使用browserSync创建服务器,自动打开浏览器并打开./dist文件夹中的文件(默认为index.html)
    browserSync.init({
        server: {
            baseDir:["./dist"],
            middleware:SSI({
                baseDir:'./dist',
                ext:'.shtml',
                version:'2.10.0'
            })
        }
    });
    //监听各个目录的文件,如果有变动则执行相应的任务操作文件
    gulp.watch("app/sass/**/*.scss", ['compass']);
    gulp.watch("app/javascript/**/*.js", ['js']);
    gulp.watch("app/**/*.html", ['html']);
    //如果有任何文件变动,自动刷新浏览器
    gulp.watch("dist/**/*.html").on("change",browserSync.reload);
});

//下面来分别看看处理各个部分的任务:

//compass任务,将scss编译为css
gulp.task('compass', function() {
        //首先取得app/sass下的所有后缀为.scss的文件(**/的意思是包含所有子文件夹)
  return gulp.src('app/sass/**/*.scss')
        .pipe(compass({
          //设置生成sourcemap,在调试器中显示样式在scss文件中的位置,便于调试
          sourcemap: 'true',
          //输出格式设置为compressed就不需要压缩css了
          style: 'compressed',
          //文件目录
          css: 'dist/stylesheets',
          sass: 'app/sass',
          image: 'app/images'
        }))
        //如果有错误输出错误提示
        .on('error', function(error) {
          // Would like to catch the error here
          console.log(error);
          this.emit('end');
        })
        //编译后的文件放入dist/stylesheets下
        .pipe(gulp.dest('dist/stylesheets'))
        //自动刷新浏览器
        .pipe(browserSync.stream());
});


//js任务,将js压缩后放入dist。该任务要在clean-scripts任务完成后再执行
gulp.task('js', function(){
        //首先取得app/javascript下的所有后缀为.js的文件(**/的意思是包含所有子文件夹)
    return gulp.src('app/javascript/**/*.js')
        //错误管理模块
        .pipe(plumber())
        //目前没用混淆,不方便调试
        //.pipe(uglify())    
        //js压缩
        .pipe(minify())
        //输出到dist/javascript
        .pipe(gulp.dest("dist/javascript"))
        //自动刷新浏览器
        .pipe(browserSync.stream());
});



//html任务,目前什么都没做。只是单纯的把所有html从开发环境app复制到测试环境dist
gulp.task('html', function() {
    return gulp.src("app/*.html")
        .pipe(plumber())        
        .pipe(gulp.dest("dist/"))
        .pipe(browserSync.stream());
});

//publish任务,需要的时候手动执行,将dist中的文件打包压缩放到release中。
gulp.task('publish', function(){
        //取得dist文件夹中的所有文件
    return gulp.src('dist/**/*')
        //错误处理模块
        .pipe(plumber())
        //压缩成名为publish.zip的文件
        .pipe(zip('publish.zip'))
        //放入release文件夹
        .pipe(gulp.dest('release'))
});
//clean任务:清空dist文件夹,下边重建dist的时候使用
gulp.task('clean', function () {
  return gulp.src('dist/*', {read: false})
    .pipe(clean());
});

//redist任务:需要时手动执行,重建dist文件夹:首先清空,然后重新处理所有文件
gulp.task('redist',function(){
    //先运行clean,然后并行运行html,js,compass
    runSequence('clean',['html','js','compass']);
});
//建立一个名为default的默认任务。当你在gitbash中执行gulp命令的时候,就会
gulp.task('default', function(){
    //先运行redist,启动服务器
    runSequence('redist','serve');
});

使用

执行gulp,会自动打开浏览器,并显示index.html文件。当改动任意文件,自动编译到dist文件夹并且自动刷新浏览器。

如果有改动文件名,编译新文件后,旧文件依然保留。此时可以直接执行gulp redist来重建dist文件夹。

写在最后

经过详细的注释,应该很简明易懂了,希望能帮到跟我一样曾经纠结过的小伙伴。花点时间熟悉搭建起来,能够大幅提高工作效率,光是不用狂按ctrl+F5,就爽的没边儿啦,哈哈哈,共勉~

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值