`
癫觉士
  • 浏览: 19497 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

gulp的安装和初级使用

 
阅读更多

 1.淘宝镜像安装npm

          cd:\文件夹名   $ npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装gulp

          npm install -g gulp (全局安装gulp模块)
          npm install —-save-dev gulp(项目本地安装gulp模块)

         -save-dev来更新package.json文件,更新devDependencies值,以表明项目需要依赖gulp
          Dependencies:指明项目在开发环境和生产环境中的node模块依懒关系

3.安装依赖模块

          npm install gulp-minify-css gulp-sass gulp-concat gulp-uglify gulp-rename del --save-dev

4.gulpifle.js代码(压缩,合并css)

'use strict';

//引入命令模块
var gulp = require('gulp'),
    minifycss=require('gulp-minify-css'),
    concat=require('gulp-concat'),
    uglify=require('gulp-uglify'),
    rename=require('gulp-rename'),
    del=require('del');
//构建task任务
    gulp.task('clean',function(cb){
        del(['minified/css'],cb)
    })
    gulp.task('minifycss',function(){
       return gulp.src('app/css/*.css')
          .pipe(minifycss())               //压缩
          .pipe(concat('main.css'))    //合并 
   .pipe(rename('main.min.css'))    //更名
          .pipe(gulp.dest('minified/css')) //输出
    })
    gulp.task('default',['clean'],function(){
      gulp.start('minifycss');
    })

分享到:
评论

相关推荐

    angulseed:使用 bower 和 gulp 构建了一个 angular 应用程序的种子项目

    7. **前端开发流程**:使用 AngularJS、Bower 和 Gulp 结合的开发流程,代表了现代前端开发的一种常见实践,这种流程强调了模块化、自动化和可维护性。 总结,angulseed 是一个基于 AngularJS 的前端项目模板,利用...

    Web前端开发技术实战视频教程 初级入门+高级实战++专家课程+面试指导

    - 函数与对象:学习如何定义函数和使用内置对象,比如数组和日期对象。 #### 三、高级实战技巧 - **响应式设计**:采用媒体查询等技术,使网站能够自适应多种设备屏幕尺寸。 - **框架与库的应用**: - **...

    webpack初级教程.pdf

    Grunt 和 Gulp 主要是基于任务的构建工具,它们更适合简单的文件操作和编译任务。Webpack 的优势在于它能够深入解析项目依赖关系,提供更强大的静态资源管理和优化能力。然而,对于简单的项目,Grunt 或 Gulp 可能更...

    HTML5-Banner-Builder-Tool:这是在创建HTML5横幅广告时使用的存储库,当创建横幅广告的dist .zip文件并准备上传到您喜欢的添加平台时,它将自动生成所有基本文件和文件夹

    确保您已在计算机上全局安装了可用的最新版本的node和gulp,有关如何安装它们的更多信息,请单击上面的链接,然后遵循入门文档。 在项目根目录的终端上运行npm install ,这将在本地安装所有依赖项。

    前端就业1

    - 学习打包工具Gulp和Webpack,以及CI/CD和Docker的基础知识。 - 熟悉Linux常用命令。 8. **软技能**: - 培养良好的沟通能力,能够与团队成员有效交流。 - 主动性与自我驱动力,能够自主解决问题和学习新技术...

    各阶段前端工程师都应该具备什么能力(JS篇).pdf

    - 初级阶段:解决常见前端问题能力、框架和库的使用能力、ajax通信能力、基本的前端工程化了解。 - 中级阶段:独立组件开发能力、性能优化能力、前端工程化深入理解、技术框架了解、函数式编程思想。 - 高级阶段:...

    漫步

    描述中提到的“npm install安装依赖项”和“gulp运行站点”揭示了这个项目是基于JavaScript生态系统,使用npm(Node Package Manager)来管理项目的依赖,并利用Gulp作为自动化构建工具。 在JavaScript开发中,npm...

    前端静态模板-手机仿驴妈妈手机-学生作业毕设实训素材.zip

    9. **构建工具**:诸如Webpack或Gulp这样的构建工具可能会被用来自动化编译、打包和优化前端资源,提高开发效率。 10. **测试与调试**:前端源码可能包含测试代码或断点,用于确保代码质量和问题排查。 11. **设计...

    H5技能图谱1.0.rar

    最后,版本控制工具Git的使用是协作开发的基础,掌握分支管理和合并策略,能帮助团队更高效地协同工作。而构建工具如Webpack或Gulp则可以自动化处理资源打包,提升开发效率。 综上所述,“H5技能图谱1.0”涵盖了...

    INCEPTUM:INCEPTUM初级企业项目

    8. **项目构建工具**:如Webpack或Gulp,自动化处理CSS和其他资源。 9. **浏览器兼容性**:了解不同浏览器对CSS特性的支持情况,确保跨浏览器兼容性。 10. **代码规范**:遵循CSS编码标准,提高代码可读性和团队协作...

    中级web前端开发工程师的工作职责说明.doc

    7.熟悉grunt、gulp、webpack等前端构建工具的使用 此外,中级web前端开发工程师还需要具备以下技能: 1.负责基于数字电视端的EPG系统的开发和维护 2.负责广电或iPTV增值业务类产品前端开发与适配,完成数据交互、...

    前端简历模板简约版123

    这份模板尤其适合应届毕业生或初级前端工程师,他们可能在工作经验上稍显不足,但希望通过突出自己的学习能力和实践项目来吸引潜在雇主的关注。 首先,简约的设计风格是现代招聘者所偏好的,它能够让关键信息...

    最全前端面试资源(视频讲解,面试题,文档)

    这些文档可能涵盖了HTML5的新特性、CSS布局方式(如Flexbox和Grid)、JavaScript语言特性、前端工程化工具(Webpack、Gulp、Babel等)的使用指南,以及前端性能优化策略等。 对于JavaScript,作为前端开发的基石,...

    html04-05

    在HTML的初级阶段,通常会学习基本标签如`<html>`、`<head>`、`<body>`、`<title>`等,以及段落`<p>`、标题`<h1>`至`<h6>`、链接`<a>`、图像`<img>`等元素的使用。 在进阶阶段,比如HTML4到HTML5的过渡,重点可能会...

    Yii2(归档文件)框架

    它可以安装和更新项目所需的第三方库,如 Yii2 自身和其他扩展。 **扩展和社区支持**:Yii2 社区活跃,有大量的第三方扩展,例如:Yii2 Gridview、Yii2 Widgets、Yii2 User 等,丰富了框架的功能。 综上所述,Yii2...

    8b98-17132656-50895.zip

    综上所述,"8b98-17132656-50895.zip"中的前端作业可能涵盖了一次初级前端开发者的学习实践,涉及到了构建基本Web页面所需的基础知识和技术。通过解压并查看这些文件,可以深入理解前端开发的基本流程和关键概念。

    某印象设计工作室前端网站毕业设计资源.rar

    【某印象设计工作室前端网站毕业设计资源】是一个包含前端开发相关素材和代码的压缩包,主要面向进行毕业设计的学生或初级前端开发者。这个资源包可能涵盖了网页设计、HTML5、CSS3、JavaScript、响应式布局等多个...

    Web前端开发 职业技能等级标准解读.pdf

    - **工具与流程**:掌握前端工程化构建工具(如Webpack或Gulp)、包管理器(如npm或Bower)的使用方法。 - **设计思维**:需要掌握面向对象编程思想,理解表现与数据分离的概念,并能够运用React/Angular/Vue等框架...

    bd-ife-mycode:百度前端学院的任务代码,初级开始~

    12. **响应式设计**:针对不同设备和屏幕尺寸的适配策略,包括媒体查询、Bootstrap框架的使用等。 总体来说,这个项目是一个全面的前端开发入门学习路径,涵盖了从基础到进阶的JavaScript知识,同时涉及前端开发的...

    HTML5Games:初级 html5 游戏

    5. **构建脚本和配置**:如Gulp、Webpack或Grunt的配置文件,用于自动化构建过程,将源代码编译、压缩并合并到可发布的版本。 6. **文档**:可能包含教程、API参考或其他帮助开发者理解和修改游戏的资料。 学习...

Global site tag (gtag.js) - Google Analytics