Gulp安装、编译、合并、压缩

来源：互联网发布：知乎经典问答2017 编辑：程序博客网时间：2024/06/07 12:44

准备工作

前提是先安装node和npm（淘宝的cnpm）

http://npm.taobao.org/

安装gulp

npm install -g cnpm--registry=http://npm.taobao.org/

npm install --global gulp

//局部安装

npm install gulp --save-dev

安装完成的话，gulp模块下载到项目中的node_modules文件夹中。

配置gulpfile.js

// 引入 gulp及组件

    var gulp = require('gulp'),    concat = require('gulp-concat'),    rename = require('gulp-rename'),    uglify = require("gulp-uglify"),    gulpif = require("gulp-if"),    htmlmin = require('gulp-htmlmin'),    useref = require('gulp-useref'),    clean = require('gulp-clean'),    babel = require('gulp-babel'),    cleanCss = require('gulp-clean-css'),    runSequence = require("run-sequence"),    cheerio = require('gulp-cheerio');

/* --------- version control ------------- */gulp.task('clean', function () {    return gulp.src('build', {read: false}).pipe(clean());});

gulp.task('default', function (callback) {    runSequence(        'simple',        "simpleApp",        "simplePlugins",        "simpleController",        "simpleImages",        "simpleCss",        callback);});

gulp.task('simple', ['clean'], function () {    return gulp.src('index.html')        .pipe(useref())        .pipe(gulpif('*.js', babel({            presets: ['es2015']        })))        .pipe(gulpif("*.js",uglify()))        .pipe(gulp.dest('build/weather'))});

gulp.task('simpleCss', function () {    return gulp.src('css/font-awesome/**/**',{base:"./css"})        .pipe(gulp.dest('build/weather/css'))});

gulp.task('simplePlugins', function () {    return gulp.src('js/iCheck/**/**',{base:"./css"})        .pipe(gulp.dest('build/weather/js'))});

gulp.task('simpleApp', function () {    return gulp.src('content/**/*.html')        .pipe(useref())        .pipe(gulp.dest('build/weather/content'))});

gulp.task('simpleController', function () {    return gulp.src('controller/*.js')        .pipe(uglify())        .pipe(gulp.dest('build/weather/controller'))});

gulp.task('simpleImages', function () {    return gulp.src('picture/*.png')        .pipe(gulp.dest('build/weather/picture'))});

运行gulp

//编译所有的

gulp default

//编译css

gulp simpleCss

阅读全文

0 0