gulp 前端的一个基本workflow

东方微尘,槟榔作用,护士长月总结

下面学生教材网的小编为您详细介绍gulp 前端的一个基本workflow文章的具体内容,佚名希望您能完整的阅读下来,看完后将会有更多收获.

代码片段(3) [全屏查看所有代码]

1. [代码]readme     跳至 [1] [2] [3] [全屏预览]

/**
 cd project
 npm init #create package.json file
 创建一个工作目录
	|- app #开发目录结构
		|- js
		|- css
		|- images
		|- fonts
		|- scss
		|- 
	|- dist/ # disribution 存放用于生产环境的文件，一般是压缩后、打包、或者做了混淆处理的代码
	|- node_modules/
	|- gulpfile.js
	|- package.json
 # 安装插件
 npm install browser-sync --save-dev
 npm install gulp -g
 npm install gulp-sass --save-dev
 npm install gulp-useref --save-dev
 npm install gulp-if --save-dev
 npm install gulp-uglify --save-dev
 npm install gulp-minify-css --save-dev
 npm install gulp-cache --save-dev
 npm install gulp-del --save-dev
 npm install run-sequence --save-dev
 */

2. [代码]gulpfile.js     跳至 [1] [2] [3] [全屏预览]

 /**
 * PART-1 development
 * --------------------------------------------
 * SASS编译CSS文件。
 * 观察www目录文件的变化, 实时更新界面。
 * 
 *
 * PART-2 build
 * --------------------------------------------
 * 优化JS CSS IMAGES 文件 复制FONTS。

 * PART-3 如何使用
 * --------------------------------------------
 * gulp watch -- 开发时
 * gulp build -- 发布
 */

var browserSync = require('browser-sync'),
	gulp = require('gulp'),
	sass = require('gulp-sass'),
	useref = require('gulp-useref'),
	uglify = require('gulp-uglify'),
	gulpIf = require('gulp-if'),	
	minifyCSS = require('gulp-minify-css'),
	cache = require('gulp-cache'),
	del = require('del'),
 	runSequence = require('run-sequence'),
	imagemin = require('gulp-imagemin');

/****************************** part-1 *****************************************/
// 压缩打包CSS,JS文件
gulp.task('useref', function(){
  return gulp.src('app/*.html')
    // Minifies only if it's a CSS file
    .pipe(gulpIf('*.css', minifyCSS()))
    // Uglifies only if it's a Javascript file
    .pipe(gulpIf('*.js', uglify()))
    .pipe(useref())
    .pipe(gulp.dest('dist'))
});

// 实时更新浏览器界面
gulp.task('browserSync', function() {
	browserSync({
		server: {
			baseDir: 'app'		
		},
	})
});

// 编译CSS
gulp.task('sass', function() {
	return gulp.src('app/scss/*.scss')
	.pipe(sass())
	.pipe(gulp.dest('app/css'))
	.pipe(browserSync.reload({
		stream: true
	}))
});

// watch 
// second array taskes should be compeleted before watch !important
gulp.task('watch', ['browserSync', 'sass'], function() {
	gulp.watch('app/scss/*.scss', ['sass']);	
	gulp.watch('app/*.html', browserSync.reload);
	gulp.watch('app/js/*.js', browserSync.reload);
});

// 编译打包图片
gulp.task('images', function() {
	return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
		.pipe(cache(imagemin({
			interlaced: true
		})))
		.pipe(gulp.dest('dist/images'))
});

// 打包字体
gulp.task('fonts', function() {
	return gulp.src('app/fonts/**/*')
		.pipe(gulp.dest('dist/fonts'))
});

// 清理多余的编译缓存
gulp.task('clean:dist', function(callback) {
	del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback);
});

gulp.task('clean', function(callback) {
	del('dist');
	return cache.clearAll(callback);
});

/****************************** part-2 *****************************************/
gulp.task('build', function(callback) {
	runSequence('clean:dist',
		['sass', 'useref', 'images', 'fonts'],
		callback)
});

3. [代码]package.json     跳至 [1] [2] [3] [全屏预览]

{
  "name": "testGulp",
  "version": "1.0.0",
  "description": "Hello gulp!",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yanming",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.10.1",
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-cache": "^0.4.1",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^2.4.0",
    "gulp-sass": "^2.1.1",
    "gulp-uglify": "^1.5.1",
    "gulp-useref": "^3.0.4",
    "run-sequence": "^1.1.5"
  }
}

angular，使用directive实现，将input的数字保留…

angulardirective标签：<无>-->-->-->1.[代码][JavaScript]代码angular.module('app').