gulp——myself配置

var gulp = require(‘gulp‘),
    uglify = require(‘gulp-uglify‘),
    concat = require(‘gulp-concat‘);
 var pump = require(‘pump‘);
 var minifycss = require(‘gulp-minify-css‘);
 var htmlmin = require(‘gulp-htmlmin‘);
gulp.task(‘compress‘, function (cb) {
    pump([
            gulp.src(‘app/**/*.js‘),
            uglify(),

            gulp.dest(‘build‘)
        ],
        cb
    );
});

gulp.task(‘default‘, function () {
    gulp
        .src(‘app/**/*.js‘) // gulp.src从水源地把水取出来,创造第一根管子
        //.pipe(concat(‘all.js‘))
        .pipe(uglify()) // 新建一个管子,然后把水处理器塞到管子里面
        // gulp.dest(‘build‘) 其实也是一种水处理器,它的作用是把水引流到某个文件夹下面
        .pipe(gulp.dest(‘dist/js‘))
});
/*var htmlmin = require(‘gulp-htmlmin‘);
 gulp.task(‘html‘, function () {
 var options = {
 collapseWhitespace: true,
 collapseBooleanAttributes: true,
 removeComments: true,
 removeEmptyAttributes: true,
 removeScriptTypeAttributes: true,
 removeStyleLinkTypeAttributes: true,
 minifyJS: true, minifyCSS: true
 };
 gulp.src(‘app/*.html‘)
 .pipe(htmlmin(options))
 //.pipe(rename({suffix: ‘.min‘}))
 //.pipe(concat(‘index.html‘))
 .pipe(gulp.dest(‘/dist/html‘));
 });
 */

gulp.task(‘htmlmin‘, function() {
    return gulp.src([‘app/*/*.html‘, ‘app/*.html‘])
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(‘dist/html‘))
        //.pipe($.notify({ message: ‘htmlmin task done‘ }));
});

////压缩css
gulp.task(‘css‘, function () {
    gulp.src(‘app/css/*.css‘)      //压缩的文件
        //.pipe(rename({suffix: ‘.min‘}))
        .pipe(minifycss()) //执行压缩
        .pipe(concat(‘index.css‘))
        .pipe(gulp.dest(‘./dist/css‘))   //输出文件夹
});

gulp.task(‘watch‘,function(){
    var watcher = gulp.watch(‘app/*.js‘,[‘default‘])

});
时间: 2024-12-25 04:48:04

gulp——myself配置的相关文章

gulp使用配置

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 1.安装gulp npm install -g gulp 2.切换到项目文件夹后创建gulpfile.js  如下: var gulp = require('gulp'); var uglify =

gulp 环境配置——cdn地址、接口请求地址自动添加、seajs混淆压缩等

一.src目录结构 ├─statics│ ├─css│ │ ├─common│ │ └─pages│ ├─img│ │ ├─common│ │ └─pages│ └─js│ ├─common│ ├─pages│ ├─pages_es6│ └─plugins└─view 二.package.json 依赖和script配置 { "name": "", "version": "1.0.0", "description&q

gulp实用配置(2)——中小项目

上一篇的gulp配置很简单,主要就是为了demo的查看和调试,这一篇则会相对详细一些,包括压缩合并打时间戳等. 在互联网环境比较好的城市,需要多人协作的,大一点的项目应该都用上了模块化(这里主要指commonjs和ES6模块系统,不是再早的require.js和sea.js).代码也会更注重如何分离和注入,而不再是单纯的合并. 但是在很多小公司,开发模式或技术都还是比较传统的,或者一些小项目也完全不需要用上那些比较前沿的技术. 所以这篇配置就主要为了这样的中小项目. 1.所需工具和版本 包管理工

gulp+webpack配置

转自:https://www.jianshu.com/p/2549c793bb27 gulp gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩

前端构建工具:gulp的配置与使用

安装gulp 因为gulp是基于node的管理工具,所以要先安装nodejs安装nodejsnodejs下载地址:中文站:http://nodejs.cn/ 英文站:https://nodejs.org/en/下载后直接运行.msi文件安装完成后,打开命令行(win+R)键入node -查看node版本 全局安装gulp npm install -g gulp 在项目目录下安装gulp,若要在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:(项目目

gulp的配置以及使用

1. 全局安装 gulp:npm install --global gulp2.作为项目的开发依赖(devDependencies)安装:npm install --save-dev gulp3.在项目根目录下创建一个名为 gulpfile.js 的文件:var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这});4.运行 gulp:gulp5.创建package.json:npm init j

gulp 编译es6 react 教程 案例 配置

1.gulp基本配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel'); var browserify = require('gulp-browserify'); var SourceMap = require('gulp-sourcemaps'); var SourceMapSupport = require('gulp-sourcemaps-support');

gulp入门教程

gulp是什么? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用它,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤

gulp详细入门教程

简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上