前端自动化构建工具库之gulp

这是一款基于nodejs的前端自动化构建工具--gulp，以下是使用gulp的步骤：

1.安装主程序，在需要编译的目录输入

npm install gulp //安装gulp插件

2.安装常用插件

npm install del//清空目录或文件用的插件
npm install gulp-concat//连接css或js的插件
npm install gulp-cssmin//压缩css的插件
npm install gulp-uglify//压缩js的插件

3.配置gulpfile.js，如果工作目录下没有该文件，请新建gulpfile.js，以下为一个常用的参考代码

/**
 * @author xialei <xialeistudio@gmail.com>
 */
(function () {
    "use strict";
    /**
     * 加载插件
     * @type {exports}
     */
    var gulp = require('gulp');
    var del = require('del');
    var cssmin = require('gulp-cssmin');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
 
    /**
     * 清空目录的命令
     */
    gulp.task('clean', function () {
        del(['build']);
    });
    gulp.task('css', function () {
        /**
         * 加载源代码
         */
        return gulp.src([
            'bower_components/bootstrap/dist/css/bootstrap.min.css',
            'bower_components/font-awesome/css/font-awesome.min.css',
            'css/style.css'
        ])
        /**
         * 压缩css
         */
            .pipe(cssmin())
        /**
         * 连接压缩后的css
         */
            .pipe(concat('style.css'))
        /**
         * 输出到目标目录
         */
            .pipe(gulp.dest('build/css'))
    });
    gulp.task('js', function () {
        return gulp.src([
        /**
         * 加载源代码
         */
            'bower_components/angular/angular.min.js',
            'bower_components/angular-sanitize/angular-sanitize.min.js',
            'js/main.js'])
        /**
         * 压缩Js
         */
            .pipe(uglify())
        /**
         * 合并js
         */
            .pipe(concat('main.js'))
        /**
         * 输出到目标目录
         */
            .pipe(gulp.dest('build/js'))
    });
    gulp.task('img', function () {
        /**
         * 加载源文件
         */
        return gulp.src([
            'img/*.*'
        ])
        /**
         * 输出到目标目录
         */
            .pipe(gulp.dest('build/img'));
    });
 
    /**
     * 定义默认任务，此任务依赖于 clean,img,css,js，所以在执行
     * 本任务时会按顺序先执行依赖任务
     */
    gulp.task('default', ['clean', 'img', 'css', 'js']);
})();

4.执行编译

gulp

转载自：每天进步一点点》使用gulp来构建你的前端自动化工作流

来源：oschina

链接：https://my.oschina.net/u/1040513/blog/678629

标签

gulp

css

pipe