`
wb1991wb
  • 浏览: 156697 次
  • 来自: 上海
社区版块
存档分类
最新评论

gulp常用插件

 
阅读更多
var gulp = require('gulp');

// 引入组件
var less = require('gulp-less'),            // less
    minifycss = require('gulp-minify-css'), // CSS压缩
    uglify = require('gulp-uglify'),        // js压缩
    concat = require('gulp-concat'),        // 合并文件
    rename = require('gulp-rename'),        // 重命名
    clean = require('gulp-clean');          //清空文件夹

// less解析
gulp.task('build-less', function(){
  gulp.src('./javis/static/less/lib/s-production.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/lib/'))

  gulp.src('./javis/static/less/lib/s-skins.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/lib/'))

  gulp.src('./javis/static/less/lib/s/s.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/lib/'))

  gulp.src('./javis/static/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/'))
});

// 合并、压缩、重命名css
gulp.task('stylesheets',['build-less'], function() {
    // 注意这里通过数组的方式写入两个地址,仔细看第一个地址是css目录下的全部css文件,第二个地址是css目录下的areaMap.css文件,但是它前面加了!,这个和.gitignore的写法类似,就是排除掉这个文件.
  gulp.src(['./javis/static/build/css/*.css','!./javis/static/build/css/areaMap.css'])
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./javis/static/build/css/'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('./javis/static/build/css'));
});

// 合并,压缩js文件
gulp.task('javascripts', function() {
  gulp.src('./javis/static/js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./javis/static/build/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('./javis/static/build/js'));
});

// 清空图片、样式、js
gulp.task('clean', function() {
  return gulp.src(['./javis/static/build/css/all.css','./javis/static/build/css/all.min.css'], {read: false})
    .pipe(clean({force: true}));
});

// 将bower的库文件对应到指定位置
gulp.task('buildlib',function(){

  gulp.src('./bower_components/angular/angular.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular/angular.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/bootstrap/dist/js/bootstrap.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/jquery/dist/jquery.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular-route/angular-route.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular-animate/angular-animate.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular-bootstrap/ui-bootstrap.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  gulp.src('./bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js')
      .pipe(gulp.dest('./javis/static/build/js/'))

  //--------------------------css-------------------------------------

  gulp.src('./javis/static/less/fonts/*')
      .pipe(gulp.dest('./javis/static/build/css/fonts/'))

  gulp.src('./bower_components/bootstrap/fonts/*')
      .pipe(gulp.dest('./javis/static/build/css/fonts/'))

  gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css')
      .pipe(gulp.dest('./javis/static/build/css/lib'))

});

// 定义develop任务在日常开发中使用
gulp.task('develop',function(){
  gulp.run('buildlib','build-less','javascripts','stylesheets');

  gulp.watch('./javis/static/less/*.less', ['build-less']);
});

// 定义一个prod任务作为发布或者运行时使用
gulp.task('prod',function(){
  gulp.run('buildlib','build-less','stylesheets','javascripts');

  // 监听.less文件,一旦有变化,立刻调用build-less任务执行
  gulp.watch('./javis/static/less/*.less', ['build-less']);
});

// gulp命令默认启动的就是default认为,这里将clean任务作为依赖,也就是先执行一次clean任务,流程再继续.
gulp.task('default',['clean'], function() {
  gulp.run('develop');
});

 

分享到:
评论

相关推荐

    精通gulp常用插件

    【gulp常用插件详解】 在JavaScript开发中,打包工具起着至关重要的作用,它们能够自动化构建过程,提高开发效率。Gulp是其中一个流行的构建工具,以其流式处理和易用性受到开发者们的喜爱。本文将深入探讨Gulp的...

    gulp编译gulp编译文件、gulp编译项目

    ### 四、gulp常用插件与应用场景 1. **`gulp-sass`**:用于将Sass文件编译成CSS,支持SCSS语法。 2. **`gulp-babel`**:将ES6+代码转译为ES5,便于浏览器兼容。 3. **`gulp-eslint`**:进行JavaScript代码风格...

    前端构建工具gulp使用教程(二)、常用gulp插件以及gulp使用完整实例-附件资源

    前端构建工具gulp使用教程(二)、常用gulp插件以及gulp使用完整实例-附件资源

    基于CMD规范的fangfis模块合并gulp插件

    Fangfis 模块合并 gulp 插件是针对 CMD 规范(Common Module Definition)的一个实用工具,主要用于 JavaScript 开发中的模块合并。CMD 是一种广泛应用于前端开发的模块化规范,与 AMD(Asynchronous Module ...

    gulp插件解决模板和静态资源编译后相对路径定位的问题

    总之,`gulp-resolve-path`是一个实用的工具,能帮助开发者在使用Gulp构建项目时避免因文件移动而产生的路径问题,提升开发效率并保持代码的可维护性。通过正确配置和与其他工具的集成,我们可以创建出高效、稳定的...

    Node.js-可以进行完整文件操作同步增加删除更新的Gulp插件

    这样的插件在开发过程中非常实用,因为它允许开发者在构建流程中自动化处理文件,提高效率并确保文件状态的一致性。 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它让开发者可以用JavaScript进行服务器端...

    浅谈gulp的使用、gulp的常用插件、gulp基本操作以及gulp的常用项目流程操作

    【gulp常用插件】 1. **清除文件夹**:`gulp-clean`用于清理指定目录。 2. **CSS处理**:`gulp-sass`编译Sass到CSS,`gulp-cssmin`压缩CSS,`gulp-autoprefixer`自动添加浏览器前缀。 3. **图片处理**:`gulp-...

    gulp的基础操作详解

    `gulp` 有大量第三方插件,如 `gulp-eslint`(ESLint 集成)、`gulp-autoprefixer`(CSS 前缀自动补全)等,可以根据项目需求选择安装和使用。 9. **Gulp工作流示例** 一个完整的 `gulp` 工作流可能包括 SCSS ...

    gulp-alias-combo-master

    总的来说,`gulp-alias-combo-master`是一个实用的Gulp插件,对于JavaScript项目的构建流程有着显著的优化效果,特别是对于那些依赖复杂,需要高效管理模块的项目,它的价值尤为突出。通过合理配置和与其他Gulp插件...

    gulp教程简单介绍

    Gulp 提供了两种常用的异常处理方式: 1. **gulp-notify**:用于在错误发生时向系统发送通知。 ```bash npm install --save-dev gulp-notify ``` 在 `gulpfile.js` 中使用: ```javascript const gulp = ...

    前端开源库-gulp-envify

    `gulp-envify` 是一个专门为前端开发者设计的开源库,它是基于 `gulp` 的一个插件,主要用于在构建流程中处理环境变量。在前端开发中,尤其是在使用模块化工具如 `browserify` 时,我们经常需要在代码中使用环境变量...

    Gulp Succinctly

    《Gulp Succinctly》是一本专为学习Gulp和Node.js技术而编写的实用书籍。本书由Kris van der Mast撰写,Daniel Jebaraj作序,并由Syncfusion, Inc.出版。这本书详细介绍了Gulp的基本概念、流的处理方式以及如何使用...

    nodejs_gulp_cli

    此外,Gulp CLI 提供了一些常用命令,如 `gulp --version` 查看版本,`gulp help` 显示帮助信息,以及 `gulp [taskName]` 执行指定的任务。如果你想要自定义命令,可以通过在 Gulpfile.js 中定义 `exports` 对象来...

    gulpAPI中文文档

    - **插件(Plugin)**:Gulp插件是用于扩展Gulp功能的NPM包,用于实现各种自动化任务。 - **Stream**:Gulp基于Node.js的流模型,可以将文件视为数据流进行处理,这使得文件处理过程更加高效。 #### 实战技巧 - **...

    gulp-Getting Started with Gulp – Second Edition

    此外,Gulp插件生态系统丰富,社区活跃,提供了许多实用的插件来扩展Gulp的功能,满足各种开发需求。 本书第二版较之第一版,应该包含了Gulp的最新特性和最佳实践,帮助开发者快速适应Gulp的新版本和社区的最新发展...

    前端开源库-gulp-clipboard

    【标题】"前端开源库-gulp-clipboard"指的是在前端开发中使用的一个开源工具,它是一个基于Gulp的插件,专门用于将文件内容轻松快捷地复制到操作系统的剪贴板。Gulp是一个自动化构建工具,它允许开发者通过定义任务...

    前端开源库-gulp-cache

    在众多的 Gulp 插件中,“gulp-cache”是一个非常实用的工具,它能够实现任务执行的缓存功能,从而在连续构建过程中避免不必要的重复工作,提高构建速度。 “gulp-cache”插件的核心理念是将先前成功处理过的文件...

    前端开源库-gulp-download

    `gulp-download`是前端开发中非常实用的工具,它通过与Gulp的完美集成,让文件下载变得更加简单高效。结合其他Gulp插件,你可以构建出一套完整的前端构建流程,从资源下载、预处理到压缩合并,全面提升开发效率。...

    前端自动化工具gulp.zip

    虽然Webpack是当前最流行的前端构建工具,但Gulp同样是一个非常实用且易上手的选择。它以其简洁的语法和强大的功能,深受许多开发者喜爱。 **标签**: Gulp, 前端自动化工具, 前端 **压缩包文件名称列表**: 1. ...

Global site tag (gtag.js) - Google Analytics