我的gulp.js清单

var gulp = require(‘gulp‘),
        cssmin = require(‘gulp-clean-css‘), //压缩css文件
        concat = require(‘gulp-concat‘), //合并js文件
        jsmin = require(‘gulp-uglify‘), //压缩js文件
        imgmin = require(‘gulp-imagemin‘), //图片压缩
        rename = require(‘gulp-rename‘), //文件重命名
        jshint = require(‘gulp-jshint‘), //js文件检查
        rev = require(‘gulp-rev‘), //- 对文件名加MD5后缀
        revCollector = require(‘gulp-rev-collector‘), //路径替换
        connect = require(‘gulp-connect‘); //配置本地服务器

//#########文件监听及自动刷新网页start#################
gulp.task(‘connect‘, function () {
    connect.server({
        host: ‘localhost‘, //地址,可不写,不写的话,默认localhost
        port: 3000, //端口号,可不写,默认8000
        root: ‘./‘, //当前项目主目录
        livereload: true //自动刷新
    });
});

gulp.task(‘html‘, function () {
    gulp.src(‘./bill/*.html‘)
            .pipe(connect.reload());
});

gulp.task(‘watch‘, function () {
    gulp.watch(‘./bill/css/*.css‘, [‘html‘]); //监控css文件
    gulp.watch(‘./bill/js/*.js‘, [‘html‘]); //监控js文件
    gulp.watch([‘./bill/*.html‘], [‘html‘]); //监控html文件
});

gulp.task(‘server‘, [‘connect‘, ‘watch‘]);

//#########文件监听及自动刷新网页end #################

gulp.task(‘Cssmin‘, function () {
    gulp.src("bill/css/common.css")
            .pipe(rename({suffix: ‘.min‘}))
            .pipe(cssmin({dubug: true}, function (details) {
                console.log(details);
                console.log(details.name + ‘(originalSize): ‘ + details.stats.originalSize);
                console.log(details.name + ‘(minifiedSize): ‘ + details.stats.minifiedSize);
            }))
            .pipe(rev())
            .pipe(gulp.dest("bill/css"))
            .pipe(rev.manifest()) //- 生成一个rev-manifest.json
            .pipe(gulp.dest(‘bill/css‘));
});

gulp.task(‘Jsmin‘, function () {
    gulp.src("bill/js/common.js")
            .pipe(rename({suffix: ‘.min‘}))
            .pipe(jsmin())
            .pipe(rev())
            .pipe(gulp.dest("bill/js"))
            .pipe(rev.manifest()) //- 生成一个rev-manifest.json
            .pipe(gulp.dest(‘bill/js‘));
});

gulp.task(‘Imgmin‘, function () {
    gulp.src("src/img/*.jpg")
            .pipe(imgmin({
                optimizationLevel: 5, //类型:Number  默认:3  取值范围:0-7(优化等级)
                progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
                interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
                multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
            }))
            .pipe(gulp.dest("dist/img"));
});

gulp.task(‘rev‘, function () {
    gulp.src([‘./bill/**/*.json‘, "./bill/index.html"])//- 读取 rev-manifest.json 文件以及需要进行替换的文件
            .pipe(revCollector(
                    {
                        replaceReved: true,
                        dirReplacements: {
                            ‘css‘: ‘css‘,
                            ‘js‘: ‘js‘
                        }
                    }
            ))//- 执行文件名的替
            .pipe(gulp.dest(‘./bill‘)); //- 替换后的文件输出的目录
});

//执行配置任务
gulp.task(‘default‘, [‘Cssmin‘, ‘Jsmin‘, "rev"], function () {
    // gulp.start(‘testJsmin‘);
});

  

时间: 2024-10-09 22:32:23

我的gulp.js清单的相关文章

又一个选择 - Gulp.js

前言 还记得过年前的那篇介绍grunt.js的文章,grunt.js的强大,相信大家都见识了.年后打了两天的酱油,看了不少grunt.js的插件和教程.发现了一个号称比grunt.js要好的构建工具 - gulp.js,详细简介gulp.js.网上有很多比较grunt.js和gulp.js的文章.谈论到的不外乎以下几点: gulp.js比grunt.js要简单.设置gulpfile.js就和编写代码一样,而不像Gruntfile.js的配置文件.(这个我十分认同,gulp.js确实比grunt.

exactly the kind of division of tasks that Gulp.js is built on

The results are then passed to a reporter function that displays the results of the code analysis in the command window—exactly the kind of division of tasks that Gulp.js is built on and that makes it so easy to configure. ---------- 译为:正是这种Gulp.js构建

Gulp.js简介

Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新图片或修改后图片的压缩 去除调试语句如console,debugger 合并和压缩css和js 把更新的文件部署到服务器 你可能设想大家都会记住所有的这些操作,但总会有人忘记一两条.随着项目越来越大,上面的工作越来越浪费时间.只好设专人来完成这些枯燥的工作. 能不能让这些工作不用

[翻译]Gulp.js简介

我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新图片或修改后图片的压缩 去除调试语句如console,debugger 合并和压缩css和js 把更新的文件部署到服务器 你可能设想大家都会记住所有的这些操作,但总会有人忘记一两条.随着项目越来越大,上面的工作越来越浪费时间.只好设专人来完成这些枯燥的工作. 能不能让这些工作不用占用人手呢? 你需要

“流式”前端构建工具——gulp.js 简介

Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什么使得 gulp.js 备受关注呢? Grunt 之殇 gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一责任原则.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一

前端构建工具gulp.js的使用介绍及技巧

一.gulp的安装 1.首先确保已经安装了node.js的环境,然后以全局的方式安装gulp 全局安装gulp--->>>npm install -g gulp 2.全局安装后,切换到gulp项目中在单独安装一次,将目录切换到gulp项目中去 局域安装gulp--->>>npm install gulp 3.安装依赖,即在安装的时候把gulp写进项目package.json文件的依赖中 npm install --save-dev gulp 二.开始使用gulp 1.和

Gulp JS简单操作-待续

一.安装gulp 1.深入设置任务之前,需先安装gulp: $ npm install gulp -g 2.这会将gulp安装到全域环境下,让你可以存取gulp的CLI.接著,需要在本地端的专案进行安装.cd到你的专案根目录,执行下列指令(请先确定你有package.json档案): $ npm install gulp --save-dev 二.生成文件结构  (生成node_modules文件) 三.创建gulpfile.js文件 var gulp = require('gulp'), ug

Gulp.js - 简单、直观的自动化项目构建工具

代码示例: var gulp = require('gulp'); var coffee = require('gulp-coffee'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var imagemin = require('gulp-imagemin'); var paths = { scripts: ['client/js/**/*.coffee', '!client/extern

gulp.js 自动化构建工具学习入门

一.基本安装 1.安装gulp 1 $ npm install --global gulp 2.作为项目的开发依赖安装 1 $ npm install --save-dev gulp 3.在项目根目录下创建 gulpfile.js 的文件 1 var gulp = require('gulp') 2 3 gulp.task('default',function(){ 4 //将你的默认任务代码放在这里 5 }) 4.运行gulp: $ gulp 以下文章参考来源:作者:Rin阳    链接:ht