gulp基础教程

栏目: 编程工具 · 发布时间: 5年前

内容简介:全局安装 gulp:作为项目的开发依赖(devDependencies)安装:在项目根目录下创建一个名为 gulpfile.js 的文件:

全局安装 gulp:

$ npm install --global gulp

作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp

在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行 gulp

$ gulp  //默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。

至此,一个简单的gulp已经完成,接下来让我们来完善部分功能

gulp功能完善

生成package.json文件

$ npm init //一直回车,有需要的可以设置

安装所需包

使用淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
示例 $ cnpm install [name]

接着

$ cnpm i browser-sync gulp gulp-clean-css gulp-imagemin gulp-rename  gulp-sass gulp-uglify gulp.spritesmith gulp-autoprefixer --save

新建gulpfile.js文件

添加

var gulp         = require('gulp'); 
var browserSync  = require('browser-sync').create(); //通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload,所有的浏览器将被告知的变化并实时更新
var sass         = require('gulp-sass'); //sass转css
var reload       = browserSync.reload; 
var minifyCSS    = require('gulp-clean-css')  //css压缩
var uglify       = require('gulp-uglify') //js压缩
var imagemin     = require('gulp-imagemin') //图片压缩
var rename       = require('gulp-rename') //文件重命名
var autoprefixer = require('gulp-autoprefixer') //自动添加前缀

设置默认文件地址

code为文件夹,里面存放html css js文件
var src = {
    scss: 'code/scss/*.scss',
    css:  'code/css/*.css',
    html: 'code/*.html',
    js:   'code/js/*.js',
    images: 'code/images/*.{png,jpg,gif,ico}'
};

gulp.task(name[, deps], fn)

name: 任务的名字
deps: 一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。
fn: 该函数定义任务所要执行的一些操作。通常来说,它会是这种形式:gulp.src().pipe(someplugin())。

// 静态服务器 + 监听 scss/html 文件
 gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./code"
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.css, ['css']);
    gulp.watch(src.images, ['images'])
    gulp.watch(src.js, ['js-watch']);
    gulp.watch(src.js, ['js']);
    gulp.watch(src.html).on('change', reload);

});

scss编译后的css将注入到浏览器里实现更新

gulp.task('sass', function() {
    return gulp.src(src.scss)
        .pipe(sass())
        .pipe(minifyCSS({
            advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
            keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
        }))
        .pipe(autoprefixer())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css"))
        .pipe(reload({stream: true}));
});

雪碧图(有需要可以尝试)

var spritesmith = require('gulp.spritesmith');
 
 gulp.task('sprite', function () {
      return gulp.src('code/images/*.png')
         .pipe(spritesmith({
             imgName:'images/sprite20161010.png',  //保存合并后图片的地址
             cssName:'css/sprite.css',   //保存合并后对于css样式的地址
             padding:20,
             algorithm:'binary-tree',
         }))
         .pipe(gulp.dest('code/scss'));
 });

监听css文件

gulp.task('css', function() {
    return gulp.src(src.css)
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css"))
        .pipe(reload({stream: true}));
});

监听js文件

gulp.task('js', function() {
    // 1. 找到文件
    return  gulp.src(src.js)
        //2. 压缩文件
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        //3. 另存压缩后的文件
        .pipe(gulp.dest('code/dest'))
        .pipe(reload({stream: true}));
})

//监听js文件变化实现热加载
gulp.task('js-watch', ['js'], browserSync.reload);

压缩图片任务

// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
        // 1. 找到图片
        gulp.src(src.images)
        // 2. 压缩图片
        .pipe($.imagemin())
        // 3. 另存图片
        .pipe(gulp.dest('images'))
        .pipe(reload({stream: true}));
});

最后控制台输入gulp执行

gulp.task('default', ['serve']);

如果觉得帮助到了你,欢迎star -> https://github.com/wclimb/wclimb.github.io

完整代码

文件目录

-code
    -imgage
       1.png
    -css
       default.css
    -scss
       default.scss
    -js
       default.js
    index.html
gulpfile.js
package.json

package.json

{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "Gulp & SASS",
  "main": "gulpfile.js",
  "scripts": {
    "start": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.0.3",
    "gulp-imagemin": "^3.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.1",
    "gulp.spritesmith": "^6.4.0",
    "gulp-autoprefixer": "^4.0.0"
  },
  "dependencies": {
    
  }
}

gulpfile.js

var gulp         = require('gulp'); 
var browserSync  = require('browser-sync').create(); //通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload,所有的浏览器将被告知的变化并实时更新
var sass         = require('gulp-sass'); //sass转css
var reload       = browserSync.reload; 
var minifyCSS    = require('gulp-clean-css')  //css压缩
var uglify       = require('gulp-uglify') //js压缩
var imagemin     = require('gulp-imagemin') //图片压缩
var rename       = require('gulp-rename') //文件重命名
var autoprefixer = require('gulp-autoprefixer') //自动添加前缀


var src = {
    scss: 'code/scss/*.scss',
    css:  'code/css/*.css',
    html: 'code/*.html',
    js:   'code/js/*.js',
    images: 'code/images/*.{png,jpg,gif,ico}'
};

// 静态服务器 + 监听 scss/html 文件
 gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./code"
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.css, ['css']);
    gulp.watch(src.images, ['images'])
    gulp.watch(src.js, ['js-watch']);
    gulp.watch(src.js, ['js']);
    gulp.watch(src.html).on('change', reload);

});


// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
    return gulp.src(src.scss)
        .pipe(sass())
        .pipe(minifyCSS({
            advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
            keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
        }))
        .pipe(autoprefixer())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css")) //重新输出数据到某个文件夹,如果没有就会自动创建
        .pipe(reload({stream: true}));
});


// 雪碧图(有需要可以尝试)
//var spritesmith = require('gulp.spritesmith');
 
// gulp.task('sprite', function () {
//     return gulp.src('code/images/*.png')
//         .pipe(spritesmith({
//             imgName:'images/sprite20161010.png',  //保存合并后图片的地址
//             cssName:'css/sprite.css',   //保存合并后对于css样式的地址
//             padding:20,
//             algorithm:'binary-tree',
//         }))
//         .pipe(gulp.dest('code/scss'));
// });


gulp.task('css', function() {
    return gulp.src(src.css)
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css"))
        .pipe(reload({stream: true}));
});


gulp.task('js', function() {
    // 1. 找到文件
    return  gulp.src(src.js)
        //2. 压缩文件
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        //3. 另存压缩后的文件
        .pipe(gulp.dest('code/dest'))
        .pipe(reload({stream: true}));
})

//监听js文件变化实现热加载
gulp.task('js-watch', ['js'], browserSync.reload);


// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
        // 1. 找到图片
        gulp.src(src.images)
        // 2. 压缩图片
        .pipe($.imagemin())
        // 3. 另存图片
        .pipe(gulp.dest('images'))
        .pipe(reload({stream: true}));
});


gulp.task('default', ['serve']);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTTP/2基础教程

HTTP/2基础教程

Stephen Ludin、Javier Garza / 罗正龙、郑维智 / 人民邮电出版社 / 2018-1 / 49.00元

让网站和应用更快速、更简洁、更稳健,从而有效提升用户体验,这无疑是众多开发者梦寐以求的。然而互联网发展日新月异,HTTP/1.1协议已经难以满足现今的需求。在众多Web性能提升方案中,HTTP/2值得尝试。 本书是HTTP/2实用指南,介绍了HTTP/2的设计初衷和新特性,以及如何才能充分利用这些特性来打造高性能网站及应用。作者用定量分析方法,对比了不同网络环境下及不同浏览器上HTTP/1.......一起来看看 《HTTP/2基础教程》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器