gulpfile配置

/** * 只包含合并压缩混淆,监听服务 */// 引入gulp模块var gulp = require(‘gulp‘);

// 引入其他模块var less = require(‘gulp-less‘),// less转化    concat = require(‘gulp-concat‘),// 文件合并    minicss = require(‘gulp-mini-css‘),// css压缩    uglify = require(‘gulp-uglify‘),// js压缩    obfuscate = require(‘gulp-obfuscate‘),// js混淆    htmlmin = require(‘gulp-htmlmin‘), // html压缩    imgmin = require(‘gulp-imagemin‘), // 图片压缩    browserSync = require(‘browser-sync‘);//服务启动

// 处理css操作gulp.task(‘styles‘, function () {    gulp.src(‘./src/styles/*.less‘)        .pipe(less())// 转化为css        .pipe(concat(‘allCss.css‘))// 合并css        .pipe(minicss())// 压缩css        .pipe(gulp.dest(‘./dist/css‘))        .pipe(browserSync.reload({stream: true}));});

// 处理js操作gulp.task(‘scripts‘, function () {    gulp.src(‘./src/scripts/*.js‘)        .pipe(concat(‘all.js‘))        .pipe(obfuscate())        .pipe(uglify())        .pipe(gulp.dest(‘./dist/scripts‘))        .pipe(browserSync.reload({stream: true}));});

// 图片操作gulp.task(‘images‘, function () {    gulp.src(‘./src/images/*.*‘)        .pipe(imgmin())        .pipe(gulp.dest(‘./dist/images‘));});

// 处理html操作gulp.task(‘htmls‘, function () {    gulp.src(‘./src/*.html‘)        .pipe(htmlmin({            collapseWhitespace: true,            removeComments: true        }))        .pipe(gulp.dest(‘./dist‘))    .pipe(browserSync.reload({stream: true}));});

// 监听文件gulp.task(‘serv‘, function () {    browserSync.init({        server: {baseDir: [‘./dist‘]}    });    gulp.watch(‘./src/styles/*.less‘, [‘styles‘]);    gulp.watch(‘./src/scripts/*.js‘, [‘scripts‘]);    gulp.watch(‘./src/*.html‘, [‘htmls‘]);});
时间: 2024-10-11 04:44:21

gulpfile配置的相关文章

[Step-By-Step Angular2](1)Hello World与自动化环境搭建

随着rc(release candidate,候选版本)版本的推出,万众瞩目的angular2终于离正式发布不远啦!五月初举办的ng-conf大会已经过去了整整一个月,大多数api都如愿保持在了相对稳定的状态——当然也有router这样的例外,在rc阶段还在大面积返工,让人颇为不解——不过总得说来,现在学习angular2不失为一个恰当的时机. Google为angular2准备了完善的文档和教程,按理说,官网(https://angular.io)自然是学习新框架的最好教材.略显遗憾的是,在B

【gulp-sass】error: File to import not found or unreadable

简要记录一下在使用gulp-sass时候踩的坑,虽然不明所以然,但是似乎在https://github.com/dlmanning/gulp-sass/issues/1 找到了答案. 在使用gulpfile配置监听文件更新自动编译时候出现了一个这个错误:"error: File to import not found or unreadable: ./m-body" 而且会出现一种奇怪的现象,当改动某个文件遇到这个报错后再重新启动编译就正常监听了该文件了,但是其他文件却不行,都是得在那

送干货,实用内联gulp插件——gulp-embed

现在npm上有很多gulp内联工具,用于把脚本和样式内嵌到HTML页面上,之前搞项目我也在这些插件中寻觅许久,但均不满足公司项目的一个需求—— HTML上同时插入了开发(dev版,src文件夹下,比如 src/index.html)和gulp处理后(build版,dest文件夹下,比如 dest/index.html)的两种版本的脚本,要求运行src文件夹下的该页面时,能忽略掉引入的build版的脚本(比如src/a.js):而在运行dest文件夹下的该页面时,能忽略的引入的dev版的脚本(比如

gulp运行及gulpfile.js配置

控制台输入,运行gulp gulp default gulpfile.js var gulp = require('gulp'), //获取gulp htmlmin = require("gulp-htmlmin"), //压缩页面javascript.css,去除页面空格.注释,删除多余属性等操作 imagemin = require("gulp-imagemin"), //压缩图片文件 cache = require('gulp-cache'), //只压缩修改

简单的gulpfile.js参数配置

这里gulp安装和模块安装我就不提了,先简单写一些配置函数 for example /** * Created by yumeiqiang on 16/7/26. */var gulp = require('gulp');var uglify = require('gulp-uglify');// 获取 uglify 模块(用于压缩 js)var minifyCSS = require('gulp-minify-css');// 获取 minify-css 模块(用于压缩 CSS)var sas

gulpfile.js配置 实现ctrl+s自动编译和刷新浏览器

var gulp = require("gulp"); //引进gulp模块var uglify = require("gulp-uglify"); //js压缩var minifyCss = require("gulp-minify-css"); //css压缩var minifyHtml = require('gulp-minify-html'); //html压缩var imagemin = require('gulp-imagemin')

Webpack的安装、配置与执行

先用npm安装 npm install webpack -g 然后在项目路径下进行项目安装 npm init # 会自动生成一个package.json文件 npm install webpack --save-dev #将webpack增加到package.json文件中 在项目根路径下建立一个 webpack.config.js文件,这个文件类似于gulp的gulpfile.js,都是配置类型的js文件

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