gulp初试

1.要在node环境下

2.

全局安装npm install gulp -g

项目中安装npm install gulp --save-dev

3.安装插件

  • sass的编译(gulp-ruby-sass)
  • 自动添加css前缀(gulp-autoprefixer)
  • 压缩css(gulp-minify-css)
  • js代码校验(gulp-jshint)
  • 合并js文件(gulp-concat)
  • 压缩js代码(gulp-uglify)
  • 压缩图片(gulp-imagemin)
  • 自动刷新页面(gulp-livereload)
  • 图片缓存,只有图片替换了才压缩(gulp-cache)

    var gulp = require(‘gulp‘),
        minifycss = require(‘gulp-minify-css‘),
        concat = require(‘gulp-concat‘),
        uglify = require(‘gulp-uglify‘),
        rename = require(‘gulp-rename‘),
        del = require(‘del‘);
    gulp.task(‘minifycss‘, function() {
        return gulp.src(‘css/*.css‘)      //压缩的文件
            .pipe(concat(‘main.css‘))
            .pipe(minifycss())  //执行压缩
            .pipe(gulp.dest(‘minified/css‘)) ;  //输出文件夹
    });
    gulp.task(‘minifyjs‘, function() {
        return gulp.src(‘js/*.js‘)
            .pipe(concat(‘main.js‘))    //合并所有js到main.js
            .pipe(gulp.dest(‘minified/js‘))    //输出main.js到文件夹
            .pipe(rename({suffix: ‘.min‘}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest(‘minified/js‘));  //输出
    });
    gulp.task(‘clean‘, function(cb) {
        del([‘minified/css‘, ‘minified/js‘], cb)
    });
    gulp.task(‘default‘,function() {
        gulp.start(‘minifycss‘, ‘minifyjs‘);
    });
    

      在cmd中运行gulp即可。

  • 更改提醒(gulp-notify)
  • 清除文件(del)

安装这些插件需要运行如下命令:

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

4.在项目根目录创建gulpfile.js

时间: 2024-10-14 21:52:19

gulp初试的相关文章

gulp入坑系列(2)——初试JS代码合并与压缩

在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/6159809.html 在之前建立的项目中写入,在根目录新建js文件夹,并在文件夹中新建两个js文件,代码如下: index.js: var index={}; index={ test:function(argument){ console.log('test'); } } index.test()

gulp教程(sass,livereload,md5,css压缩,js压缩,img的base64)

环境 node -v  v6.10.3 npm -v  3.10.10 package.json如下: { "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": &

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件... 1.gulp-less:用于把less文件编译成css文件. 因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件.除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译. 在用gulp编译前,首先你需要安装node.js.gulp是基于node.js,理所当然需要安装node.js.npm(node package manage

git上传文件到github与gulp的简单使用

git有两种方式提交源代码到github 第一种方式通过地址提交下面介绍的是通过ssh方式上传 git使用ssh方式上传代码到githubgit首先要生成公钥和私钥 将公钥添加到github中将私钥保存在本地 + 命令:`ssh-keygen -t rsa`生成的公钥与私钥文件会在当用户目录的.ssh目录下. 把代码push到服务器时需要先pull一下(pull的作用是从远程下载git项目里的文件,然后将文件与本地的分支进行merge) git pull和gitclone区别:git pull

gulp

了解 首先我们了解一下什么是gulp, gulp是前端自动化构建工具,在开发过程中很多重复的任务,我们都可以正确的使用gulp来完成,gulp基于nodejs,

Ubuntu Nginx uwsgi django 初试

/************************************************************************************** * Ubuntu Nginx uwsgi django 初试 * 说明: * 最近打算通过Python搭建一个数据收集的网站,先做一个搭建测试. * * 2016-8-5 深圳 南山平山村 曾剑锋 ***************************************************************

前端构建工具gulp入门教程

新建Gulpfile文件,运行gulp 安装好gulp后我们需要告诉它要为我们执行哪些任务,首先,我们自己需要弄清楚项目需要哪些任务. 检查Javascript 编译Sass(或Less之类的)文件 合并Javascript 压缩并重命名合并后的Javascript 安装依赖 npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 新建gulpfile文件 现在,组件都安装完毕,我们需要新建

Gulp新手入门教程

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 在我们深入了解之前,我们先来说说为什么是Gulp. 为什么是Gulp? 类似Gulp的

gulp使用方法总结

gulp是用于前端构建的基于文件流的一套工具.可以用于压缩.编译.合并.检查文件等操作.可以节省大量的用于繁琐重复操作的人力.最开始就是安装gulp工具了,在命令行中切换到工作的文件目录下,安装gulp:可以选择局部安装(cnpm install gulp --save-dev),也可以选择全局安装(cnpm install gulp -g).使用gulp主要要用到3个API:(1)gulp.src(): 主要用于获得匹配的目标文件.src的参数可以是一个匹配字符串(*是通配符),也可以是一个确