1、项目结构和生产之后的目录

2、gulpfile.js

// 载入插件
var gulp = require('gulp'), //本地安装gulp所用到的地
sass = require('gulp-sass'), // 处理sass
less = require('gulp-less'), // 处理less
autoprefixer = require('gulp-autoprefixer'), //根据设置浏览器版本自动处理浏览器前缀
minifycss = require('gulp-minify-css'), //压缩css 减小文件大小,并给引用url添加版本号避免缓存
rev = require('gulp-rev-append'), //给页面引用url添加版本号,以清除页面缓存
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'), ///压缩javascript文件,减小文件大小
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
htmlmin = require('gulp-htmlmin'),
runSequence = require('gulp-run-sequence'); // 样式
gulp.task('scss', function() {
return gulp.src('src/styles/sass/*.sass')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles/sass'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles/sass'))
.pipe(notify({ message: 'Styles task complete' }));
}); gulp.task('less', function() {
return gulp.src('src/styles/less/*.less')
.pipe(less({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles/less'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles/less'))
.pipe(notify({ message: ' less Styles task complete' }));
}); gulp.task('css', function() {
return gulp.src('src/styles/css/*.css')
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles/css'))
.pipe(notify({ message: ' css Styles task complete' }));
}); // 脚本
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
//.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
// .pipe(concat('common.js')) //公共js
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
}); // 图片
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
}); //html
gulp.task('html', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('src/html/*.html')
.pipe(htmlmin(options))
.pipe(rev())
.pipe(gulp.dest('dist/html'));
}); // 清理
gulp.task('clean', function() {
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images','dist/html'], {read: false})
.pipe(clean());
}); // 预设任务
gulp.task('default', ['clean'], function() {
gulp.start('scss','less','css', 'scripts', 'images','html');
}); gulp.task('prod', function(cb) {
runSequence('clean', ['images','less','scss','css','scripts'], 'html',cb);
}); // 看手
gulp.task('watch', function() { // 看守所有.scss档
gulp.watch('src/styles/**/*.scss', ['scss']); // 看守所有.less
gulp.watch('src/styles/**/*.less', ['less']); // 看守所有.css
gulp.watch('src/styles/**/*.css', ['css']); // 看守所有.js档
gulp.watch('src/scripts/**/*.js', ['scripts']); // 看守所有图片档
gulp.watch('src/images/**/*', ['images']); // 看守所有图片档
gulp.watch('src/html/**/*.html', ['html']); // 建立即时重整伺服器 为了让这个功能有效,除了伺服器之外,还需要安装并启用LiveReload的浏览器外挂。或者你也可以手动加上这个片段程式码
//var server = livereload(); // 看守所有位在 dist/ 目录下的档案,一旦有更动,便进行重整
//gulp.watch(['dist/**']).on('change', function(file) {
// server.changed(file.path);
//}); });

3、执行gulp 之前先安装上面涉及到的插件:

~ $ cnpm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache gulp-run-sequence gulp-less  notify-send --save-dev jshint gulp-jshint

4、执行:gulp 或者gulp prod (这个按顺序执行任务)

5、如果出现:

gulp-notify: [Error in notifier] Error in plugin 'gulp-notify' not found: notify-send

错误

解决办法:

sudo apt-get update
sudo apt-get install libnotify-bin

gulp构建例子(ubuntu)的更多相关文章

  1. express+gulp构建项目(二)启动项目和主文件

    这一次整理的内容是项目主文件和如何启动项目. 启动项目 通过nodejs官网的例子https://nodejs.org/docs/latest-v4.x/doc/api/synopsis.html我们 ...

  2. Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...

  3. Gulp构建前端自动化工作流之:常用插件介绍及使用

    在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...

  4. [翻译]在gulp构建工具中使用PostCSS

    前言 PostCSS已经在一段时间内迅速普及,如果你还不知道PostCSS或还没有使用它,我建议你看一下之前的一篇介绍文章<PostCSS简介>,其中介绍了使用PostCSS的基本方法,包 ...

  5. 用gulp构建你的前端项目

    前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...

  6. 基于 debootstrap 和 busybox 构建 mini ubuntu

    基于 debootstrap 和 busybox 构建 mini ubuntu 最近的工作涉及到服务器自动安装和网络部署操作系统,然后使用 ansible 和 saltsatck 进行配置并安装 op ...

  7. Angular企业级开发(6)-使用Gulp构建和打包前端项目

    1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...

  8. 使用 gulp 构建一个项目

    本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gul ...

  9. gulp构建工具学习汇总

    前端脚手架____gulp配置文件------- https://pan.baidu.com/s/1eSs7COy 1:有了package.json 直接 npm install自动下载相应的npm包 ...

随机推荐

  1. Open 常用开源

    msdn:https://msdn.microsoft.com/zh-cn codeplex:https://www.codeplex.com/ gotdotnet:http://www.gotdot ...

  2. xpath-grab english name

    from scrapy.spider import Spider from scrapy.crawler import CrawlerProcess import pymysql conn = pym ...

  3. llvm,gcc

    GCC,LLVM,Clang编译器对比   在XCode中,我们经常会看到这些编译选项(如下图),有些人可能会有些茫然,本文将对GCC4.2.LLVM GCC 4.2.LLVM compliler 2 ...

  4. 用linux c求最大公约数

    我写了两中函数,一个是辗转相除法一个是更相减损法,主要代码如下: /*辗转相除法*/int gcd(int a, int b) { ) { return b; } else { return gcd( ...

  5. 给Django后台富文本编辑器添加上传文件的功能

    使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...

  6. mysql参照完整性 策略设置之 on update 和 on delete

    一.当表中有外键约束的时候参照表中数据的删除和修改违背参照完整性时 可根据以下策略进行处理 1.两条策略设置为cascade的时候 参照表中的数据修改或者删除的时候改表中数据也会被删除 2.两条策略设 ...

  7. sap 动态字段的使用

    1.sap中的动态字段其实类似c#里面的指针,都是指向的地址. 只是写法不同,sap 中的field-symbols就是类似指针. , b TYPE i. FIELD-SYMBOLS <fs&g ...

  8. python学习笔记(二十五)重写父类方法

    python继承中,如果子类在调用某个方法时,它首先是从派生类(也就是当前类)中去找对应的方法,如果当前类中找不到对应的方法,就会去基类(派生类)中去逐个查找. 若父类的方法不能满足子类的需要,那么子 ...

  9. Jmeter(三)断言和关联

    Jmeter断言 断言是什么呢,它是用来检查返回结果对不对的.用来验证结果是否正确,如果正确的话,就代表这个请求的返回是正确的,如果没有的话就代表这个请求的结果和我们预期的不一致,这样我们就可以通过断 ...

  10. Hbase架构和读写流程

    转载自:http://www.cnblogs.com/muzili-ykt/p/muzili_ykt.html 在HBase读写时,相同Cell(RowKey/ColumnFamily/Column相 ...