码迷,mamicode.com
首页 > 其他好文 > 详细

前端构建工具Gulp

时间:2015-05-13 19:01:20      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

Gulp干嘛的?如题。下面的内容里会有一些详细功能。

其实虽然闻名已久,我也是今天才开始研究。

所以边研究边做个笔记,希望同大家一起进步。

Gulp开始:

1.安装包

全局:npm install gulp -g

项目:npm install --save-dev gulp

2.配置文件

创建gulpfile.js在你的项目根目录,通俗来说这就是gulp的配置文件,你想运用gulp的哪些功能,就在里面配置就行了(其实就是在这文件里面写代码)

3.运行: 

cd到项目根目录,敲个命令 gulp  就OK了

功能举例展现:

一.删除文件及文件夹

安装gulp的删除模块

$ npm install --save-dev gulp del

这里删除分为两种情况:项目启动前和项目启动后,下面分别介绍。

1.项目启动前

用webstorm的都知道,它会在我们的项目里创建.idea文件夹,用vscode的话它会创建.setting文件夹。可实际发布环境中,这些都是不必要的,这时我们就可以通过gulp来删除了。下面展示如何在项目启动前删除:

var gulp = require(‘gulp‘);
var del = require(‘del‘);
//创建任务del
gulp.task(‘del‘,function(cb){
    del([
        ‘./1.txt‘, //删除文件
        ‘./123/*‘, //删除123文件夹下的匹配项
        ‘!./123/3.txt‘  //不要删除的文件
    ],cb);
});
//敲打gulp命令时,它会先寻找default这个默认任务,然后根据第二个参数去查找任务执行。当然也可以直接gulp+任务名来执行任务
gulp.task(‘default‘,[‘del‘]);

2.项目启动后(类似将要删除的文件被引用或正在使用)

 

npm install --save-dev gulp del vinyl-paths

 

var gulp = require(‘gulp‘);
var del = require(‘del‘);
var vinylPaths = require(‘vinyl-paths‘);
gulp.task(‘clean‘, function () {
    //用vinylPath来记录下要删除的文件的地址
    var vp=vinylPaths();
    gulp.src(‘1.js‘)
     .pipe(vp)
    .pipe(gulp.dest(‘dist‘))
    .on(‘end‘,function(){
        //删除文件
        del(vp.paths);
    });
});
gulp.task(‘default‘, [‘clean‘]);

二. 压缩合并

npm install --save-dev gulp-minify-css gulp-concat gulp-uglify

var gulp = require(‘gulp‘),
    minifycss = require(‘gulp-minify-css‘),
    concat = require(‘gulp-concat‘),
    uglify = require(‘gulp-uglify‘);
    
//压缩合并css
gulp.task(‘minifycss‘, function() {
     gulp.src(‘./css/*.css‘)      //压缩的文件
        .pipe(minifycss())  //执行压缩
        .pipe(concat(‘main.css‘))  //合并到main.css中
        .pipe(gulp.dest(‘minified‘));  //输出文件夹
});
//压缩合并js
gulp.task(‘minifyjs‘, function() {
    return gulp.src(‘./javascript/*.js‘)   //也可以是数组,例如[‘foo/*‘, ‘bar/*‘]
        .pipe(uglify())    //压缩
        .pipe(concat(‘main.js‘))    //合并所有js到main.js
        .pipe(gulp.dest(‘minified‘));    //输出main.js到文件夹
});

先写到这,下来会继续写

前端构建工具Gulp

标签:

原文地址:http://www.cnblogs.com/showtime813/p/4500766.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!