gulp构建自动化项目

‘use strict‘;
var gulp = require(‘gulp‘),
    browserSync = require(‘browser-sync‘).create(),
    SSI = require(‘browsersync-ssi‘),//多浏览器多设备同步&自动刷新
    concat = require(‘gulp-concat‘),//整合文件
    uglify = require(‘gulp-uglify‘), //混淆js   暂时没用到
    minify = require(‘gulp-minify‘), //压缩js
    plumber = require(‘gulp-plumber‘),//错误处理插件plumber
    compass = require(‘gulp-compass‘),    //compass 用来编译sass
    imagemin = require(‘gulp-imagemin‘),//压缩图片
    clean = require(‘gulp-clean‘), //clean 用来删除文件
    zip = require(‘gulp-zip‘),//压缩文件
    runSequence = require(‘gulp-run-sequence‘);//控制task中的串行和并行。这个很重要,它能够严格规定task的执行顺序,否则gulp默认并行,有些时候会产生问题。如先清空再重建文件,可能重建过程中又清空了。

//创建一个名为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/script/*.js", [‘js‘]);
    gulp.watch("app/**/*.html", [‘html‘]);
    gulp.watch("app/img/**/*.*", [‘img‘])
    gulp.watch("app/font/*", [‘font‘])
    //如果有任何文件变动,自动刷新浏览器
    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/css‘,
            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/css‘))
        //自动刷新浏览器
        .pipe(browserSync.stream());
});

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

// 处理图片
gulp.task(‘img‘, function(){
    return gulp.src(‘app/img/**/*.*‘)
        .pipe(imagemin())
        .pipe(gulp.dest(‘dist/img‘))
        .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‘))
});

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

//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‘, ‘img‘,‘compass‘,‘font‘]);
});

//建立一个名为default的默认任务。当你在gitbash中执行gulp命令的时候,就会
gulp.task(‘default‘, function () {
    //先运行redist,启动服务器
    runSequence(‘redist‘, ‘serve‘);
});

构建初始化项目

npm init

全局安装依赖gulp

npm install gulp -g

安装依赖

npm install browser-sync  browsersync-ssi gulp gulp-clean gulp-compass gulp-concat gulp-imagemin gulp-minify gulp-minify-css gulp-plumber gulp-run-sequence gulp-sass gulp-uglify gulp-zip plumber --save

按照上图给的目录:构建

dist的文件中的所有都是通过gulp生成,无需操作,只需操作app文件中的就可以。

原文地址:https://www.cnblogs.com/sklhtml/p/8421669.html

时间: 2024-09-29 02:22:30

gulp构建自动化项目的相关文章

Gulp构建Android项目,安装APK

Gulp构建Android项目,安装APK 上一节Gulp安装及使用这篇文章中说到,Gulp可以执行终端命令,是不是有很多想法呢,:) 这篇没有多少技术性,仅供娱乐 测试环境 Mac:10.10.4 Gulp:3.9.0 Android studio:1.3 time:2015年08月21日17:29:07 前提 整个Android项目在Android studio中已经编译好,可以正常运行.如果没有编译好的话,只能是在终端输出错误日志了. 文件目录 root |----gulpfils.js

使用 gulp 构建一个项目

本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gulp 使用 gulp 压缩 JS 使用 gulp 压缩 CSS 使用 gulp 压缩图片 使用 gulp 编译 LESS 使用 gulp 编译 Sass 使用 gulp 构建一个项目 并将之前所有章节的内容组合起来编写一个前端项目所需的 gulp 代码. 若你不了解npm 请务必阅读 npm模块管理器

2016-7-15(1)使用gulp构建一个项目

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt.构建工具依 靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查.合并.重命名.压缩.格式 化.浏览器自动刷新.部署文件等功能. gulp是基于Nodejs的自动运行器,他借鉴了Unix操作系统的管道(pipe)思想,前一级的输出是后一级的输入.下面是具体流程: 1.安装nodejs nodejs下载地址:https://nodejs.org/ nodejs自带

使用gulp构建一个项目

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt.构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查.合并.重命名.压缩.格式化.浏览器自动刷新.部署文件等功能. gulp是基于Nodejs的自动运行器,他借鉴了Unix操作系统的管道(pipe)思想,前一级的输出是后一级的输入.下面是具体流程: 1.安装nodejsnodejs下载地址:https://nodejs.org/ nodejs自带npm

用gulp构建你的前端项目

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().

Gulp构建前端自动化工作流之:常用插件介绍及使用

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <

用gulp替代fekit构建前端项目

https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反,fekit帮我们做了很多事情,还屏蔽了许多细节,让开发人员能够专注于开发过程.不过随着fekit的升级,也出现了一些问题,同时fekit和公司业务及发布流程有一定耦合,所以觉得采用开源的构建方案. 在使用gulp的过程中,基本也是依据使用fekit的思路来逐步完善构建过程的,所以还是要感谢fekit

Gradle3.0自动化项目构建技术精讲+实战

第1章 课程介绍本章主要向大家介绍本课程的整体规划,包括课程收获,适合人群,课程章节安排等,通过本章的学习,可以让大家对课程有一个整体认知. 第2章 gradle快速入门本章会从整体上讲解一下gradle相关概念,让大家明白groovy与gradle, DSL的关系,以及清楚gradle的语法采用的就是groovy的核心语法,避免后面的学习出现概念上的疑惑. 第3章 开发环境搭建本章主要带领大家完成开发环境搭建,包括环境变量配置以及开发环境搭建,为我们后续的开发打下坚实的基础. 第4章 Grad

gulp 前端自动化工具

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用